Как установить срок действия для localStorage?

JavaScript
Как установить срок действия для localStorage?

введение

Эта тема действительно обсуждалась в прошлый разуже сказал (大佬可绕过哦～), но затем некоторые студенты в группе/комментариях упомянули некоторые вопросы и спросили, могут ли они организовать более подробный обмен отдельно, объяснить детали и исправить упомянутые недостатки, если да, то следующее 👇.

вот@IT · Союз братьев Пинтоу,Я首席填坑官—Сунан, Поделись сердцем и будь теплым осадным львом.
Публичный номер Z:honeyBadger8, группа: 912594095

Точки для размышлений

Давайте начнем с первых знакомых файлов cookie, связанных с хранением, или проанализируем Taobao, логистику, будильники и другие вещи, которые тесно связаны в нашей жизни с тех пор, как мы связались с интерфейсом.

  • Печенье будет дано время с момента его установки, и его истекает, если сеанс по умолчанию не установлен;
  • Taobao shopping установит время получения этого товара из вашего заказа, и будет автоматически считать, что вы получили это время (т.е. это время.订单结束);
  • Будильник Установленное вами время напоминания на самом деле является временем его истечения;
  • Другим примером является спрос на продукт, который тесно связан с вами каждый день.После того, как спрос будет выполнен, время онлайн, которое вы даете, является временем истечения этого спроса;
  • Проще говоря, период между вашим днем ​​рождения в этом году и вашим днем ​​​​рождения в следующем году эквивалентен установлению даты истечения срока действия;

Из всего вышесказанного можно сделать вывод, что любое событие, поведение, имеет время, узел, и даже мы можем зачернитьlocalStorage, это идеальный API, почему бы нам не дать механизм для установки срока действия, потому чтоsessionStorage,CookieЭто не соответствует нашим реальным потребностям.

Реализовать идеи

прости, черныйlocalStorageЭто не идеально, это немного преувеличено.Исходя из приведенного выше резюме, проблема проста.localStorageСрок годности, все так просто? В конце давайте взглянем на конкретную реализацию:

Краткий обзор

//示例一：
localStorage.setItem('test',1234567);
let test = localStorage.getItem('test');
console.log(typeof test, test); 

//示例二：
localStorage['name'] = '苏南';
console.log(localStorage['name']);
/*
输出:
"1234567" ,'苏南',
这里要注意，1234567 存进去时是number 取出来就成string了
*/

Переопределите метод set (save):

  • Прежде всего, есть три параметра: ключ, значение, срок действия, соответствующие ключу, значению, сроку действия соответственно,
  • Можно свободно использовать единицы времени истечения, такие как часы, минуты и дни.
  • УведомлениеТочка: сохраненное значение может быть массивом/объектом, который не может быть сохранен напрямую и должен быть преобразованJSON.stringify,
  • Как установить это время? При сохранении этого значения поле расширяется на основе ключа (ключа), например: key+'expires', а его значение - текущая временная метка + просроченное время истечения срока действия
  • Давайте посмотрим на код:

set(key, value, expired) {
	/*
	* set 存储方法
	* @ param {String} 	key 键
	* @ param {String} 	value 值，
	* @ param {String} 	expired 过期时间，以分钟为单位，非必须
	* @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
	*/
	let source = this.source;
	source[key] = JSON.stringify(value);
	if (expired){
		source[`${key}__expires__`] = Date.now() + 1000*60*expired
	};
	return value;
}

Переопределить метод get:

  • При получении данных сначала определите период действия ранее сохраненного времени и сравните его с текущим временем;
  • но при храненииexpiredЭто необязательный параметр, поэтому по умолчанию используется текущее время + 1, то есть действует длительное время;
  • Если время истечения установлено во время хранения и обнаруживается, что оно меньше, чем текущая метка времени при его получении, выполняется операция удаления и возвращается нулевое значение;
  • УведомлениеТочка: сохраненное значение может быть массивом/объектом, который нельзя вернуть сразу после извлечения, и его необходимо преобразовать.JSON.parse,
  • Давайте посмотрим на код:
get(key) {
	/*
	* get 获取方法
	* @ param {String} 	key 键
	* @ param {String} 	expired 存储时为非必须字段，所以有可能取不到，默认为 Date.now+1
	* @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
	*/
	const source = this.source,
	expired = source[`${key}__expires__`]||Date.now+1;
	const now = Date.now();

	if ( now >= expired ) {
		this.remove(key);
		return;
	}
	const value = source[key] ? JSON.parse(source[key]) : source[key];
	return value;
}

Переопределите метод удаления:

  • Операция удаления проста;

remove(key) {
	const data = this.source,
		value = data[key];
	delete data[key];
	delete data[`${key}__expires__`];
	return value;
}

Точка оптимизации:

  • Помните, в прошлый раз было同学, это такКомментарий: "Можно удалить кеш в конструкторе, не лучше ли положить его в гет и держать там без выборки?";
  • почему бы нетfor inно для ?for inПри циклическом просмотре свойств объекта будут доступны все свойства в цепочке прототипов, решение: используйтеhasOwnPropertyФильтрация методов или Object.keys вернет массив своих собственных перечисляемых свойств;

class storage {

	constructor(props) {
		this.props = props || {}
		this.source = this.props.source || window.localStorage
		this.initRun();
	}
	initRun(){
		/*
		* set 存储方法
		* @ param {String} 	key 键
		* @ param {String} 	value 值，存储的值可能是数组/对象，不能直接存储，需要转换 JSON.stringify
		* @ param {String} 	expired 过期时间，以分钟为单位
		* @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
		*/
		const reg = new RegExp("__expires__");
		let data = this.source;
		let list = Object.keys(data);
		if(list.length > 0){
			list.map((key,v)=>{
				if( !reg.test(key )){
					let now = Date.now();
					let expires = data[`${key}__expires__`]||Date.now+1;
					if (now >= expires ) {
						this.remove(key);
					};
				};
				return key;
			});
		};
	}
}

Суммировать:

Вышеизложенное является обобщением для вас сегодня. Вы уже получили его? Можно использовать мини-программы, sessionStorage и localStorage. Просто внесите некоторые коррективы. Я надеюсь, что сегодняшняя публикация принесет вам некоторый рост. Если вы считаете, что это хорошо, не забудьте поставить лайк и следовать приведенным ниже инструкциям.Публичный ZБолее того, мы будем публиковать для вас последние публикации каждую неделю👇👇.

宝剑锋从磨砺出，梅花香自苦寒来，做有温度的攻城狮!，公众号：honeyBadger8，梅斌的专栏,首席填坑官∙苏南的专栏

Автор: Сунан-Главный специалист по заполнению карьеров
Связь:blog.CSDN.net/WeChat_4325…
Группа обмена: 912594095, Привет публике:honeyBadger8
Данная статья является оригинальной и авторские права принадлежат автору. Для коммерческой перепечатки обращайтесь@IT·平头哥联盟Авторизованная, некоммерческая перепечатка, просьба указывать оригинальную ссылку и источник.

Категории