Добавить срок действия в localStorage

JavaScript
Добавить срок действия в localStorage

Классное начало

После годичного погружения в «Наггетс» я наконец набрался смелости и начал писать свою первую статью. Передний гарнир, просто хочу записать свои мысли, я надеюсь, что все, кто увидит эту статью, слегка побрызгают.

В текущем режиме разработки, в котором разделены интерфейс и задний конец, печенье, используемое в прошлом, обычно не используется для хранения информации. Возьмите проекты, которые я сделал до примера. После того, как мы все успешно войдем в систему, бэкэн вернет мне токен. При нормальных обстоятельствах я сохраню этот токен кlocalStorageЭтот токен будет проводиться в заголовке запроса в каждом последующем запросе. Что касается того, почему сохранитьlocalStorageЯ считаю, что разработчики, которые делали одностраничные веб-приложения, также знают, что если его нет, то пользователь обновится и ничего не будет.

Видно, что внешнее хранилище становится все более и более важным в проекте.Браузер предоставляет нам два решения для хранения, одно из которыхlocalStorage,одинsessionStorage. сохранитьlocalStorageИнформация хранится постоянно, если пользователь не удалит ее вручную или код неlocalStorage.removeItem(xxx)Такой призыв, что эта информация никогда не исчезнет; вsessionStorageИнформация, хранящаяся на веб-странице, является одноразовой, и информация не будет сохранена при следующем входе пользователя на веб-страницу после закрытия веб-страницы. Однако при применении реальных проектов эффективность этих двух схем не столь удовлетворительна. Например, я хочу реализовать функцию, при которой пользователю не нужно снова входить в систему в течение семи дней после входа. передает его на внешний интерфейс, но для браузера. С помощью имеющихся в настоящее время решений для хранения я могу выбрать только постоянное хранилище и одноразовое хранилище. Одноразового хранения точно мало, а постоянное хранение против моей воли.

Во-вторых, решение в предыдущем проекте

То, что я делал в проекте раньше, заключалось в использованииlocalStorageПри сохранении значения токена я также сохраняю время истечения (количество миллисекунд), а затем, когда проект инициализируется, я проверяю это время, чтобы увидеть, меньше ли оно текущего времени, и если да, то удаляю токен. . Таким образом, когда последующие проекты используют этот токен, токен был изменен сlocalStorageбыл удален. Но с этим тоже есть проблема: если время открытия проекта окажется за 10 секунд до истечения срока действия токена, то токен не будет удален. Итак, я подумал о (мусорном) надежном (мусорном) решении в своей голове и инкапсулировал его как инструмент.

Прежде всего, позвольте мне представить мой проект,sweet-storage, пожалуйста, игнорируйте смертные имена этой земли. Адрес гитхаба:GitHub.com/C-синтезатор/…. Кстати, я тоже ищу волну звезд с (влажным) большим (презренным) светом (нет) Мин (стыд).

3. Предлагайте новые идеи

Воу, воу, воу! Без лишних слов, давайте поговорим о моих идеях реализации.

При возникновении требований к хранилищу со сроком действия используйте мой проект как каштан,storage.save('name', 'chechengyi', 10000)Эта строка кода означает, что я хочуlocalStorageЕсть сообщение, ключ которого name и значение которого chechengyi. Я надеюсь, что это сообщение будет храниться только в течение 10 секунд. При сохранении информации в localStorage я помещу информацию о сроке действия как

  {
      key: time
  }

Форма также хранится в localStorage. key — это ключ, time — это время, когда истекает срок действия сообщения. Время здесь должно быть сохраненоnew Date().getTime()+ Время, которое мы установили. Это дает точное количество миллисекунд. Эта информация о сроке действия в моем проекте начинается сISTORAGE_RECORDполевое хранение. Затем мы извлечем время на основе этого позже, а именно:new Date().getTime()-timeНа этот раз, чтобы сделать таймер. Таймер истекlocalStorageСохраненная информация и сохраненная информация о времени являются ключевым временем в этом объекте, просто удалите его.

Но тут тоже есть проблема, т.к. Возможно, нам нужно хранить более одного раза со сроком действия. Сделаю ли я три таймера, если сохраню три записи? Если я сохраню 100 записей, я сделаю 100 таймеров? Это слишком низко и нереально. Поэтому я задумался и обнаружил, что очередь приоритетов, которую я только что изучил на днях, очень подходит для использования здесь.

Мы можем сделать это на основеISTORAGE_RECORDВремя извлеченного объекта используется для создания минимальной кучи (моя очередь приоритетов основана на минимальной куче), минимальной кучи, корневой узел должен быть наименьшим, а не тот, у которого наименьшее время первый таймер выполнить? Удалить, когда этот таймер выполняетсяlocalStorageИнформация и информация о времени, хранящиеся в нем, а затем приоритетная очередь извлекается из очереди, а следующий элемент, который ставится в очередь для исключения из очереди, — это информация, которая является следующей самой последней по времени и ожидает истечения срока действия. О работе структуры данных минимальной кучи сказать особо нечего. Заинтересованные студенты могут пойти и увидеть реализацию своими глазами. Это общая идея реализации моего проекта.Если он действительно реализован, он также должен учитывать ситуацию, когда он удаляется пользователем до истечения срока его действия.

Когда я добрался сюда, я снова подумал: «Ни за что, он просто «по-тихому» истек. Я хочу знать, когда он истечет, то есть я хочу уведомить меня, когда он истечет, хорошо? Итак, после очередного раунда размышлений я обнаружил, что модель публикации-подписки, которую я изучил в прошлом году, может быть использована здесь. Затем идет реализация кода, которая представляет собой не что иное, как создание объекта наблюдателя. Чтобы подписаться на событие с сохраненным именем ключа, в моем проекте этоstorage.on('name', (key)=>{})Затем, когда таймер сработает, яobservers.trriger('name')Чтобы опубликовать это событие, и передать ключ информации, которую необходимо удалить, в функцию подписки. Это выполняет функцию уведомления. Здесь не будем повторяться, как реализовать конкретную модель публикации-подписки.

4. Беспардонный вывод

sweet-storageОбщая идея реализации закончена.Заинтересованные студенты могут перейти посмотреть реализацию исходного кода.Здесь подчеркивается, что адрес github:GitHub.com/C-синтезатор/…. Мой код написан очень хорошо (мусор) и прост (мусор) для понимания.

Я также загрузил этот проект в npm,npm install sweet-storageможно установить локально. Я применил полученные знания, уже больше года ныряю в крупные форумы, каждый раз, когда я вижу, как другие делятся моим опытом, у меня чешется сердце, и в этот раз я наконец решился сделать первый шаг. Я многому научился в процессе, и я надеюсь, что смогу придерживаться этого.

Если что-то не так, я надеюсь, что мои друзья могут указать на это, и я надеюсь, что мои друзья могут дать мне больше предложений.

Наконец, волна акцента! ! !

Адрес гитхаба:GitHub.com/C-синтезатор/….

Ищу звезду, ищу трах ......