Хотите узнать, как внешний интерфейс уровня 20 КБ использует LocalStorage в проекте?

Архитектура внешний интерфейс JavaScript
Хотите узнать, как внешний интерфейс уровня 20 КБ использует LocalStorage в проекте?

предисловие

Всем привет, я Линь Сансинь,Простыми словами расскажите о самых сложных пунктах знаниймой девиз,Основа является предпосылкой передовыхЭто мое первоначальное намерение.Сегодня я дам вам чат и расскажу о том, как его использовать.localStorage、sessionStorage, чтобы быть более стандартизированным, высоким и привлекательным.

полезность

При нормальном развитииlocalStorage、sessionStorageПрименений много, и они играют очень важную роль в нашем развитии:

  • 1. После входа в системуtokenместо хранения
  • 2. Хранение некоторой пользовательской информации, такой как昵称、头像、简介
  • 3. Хранение общих параметров некоторых проектов, таких как某个id、某个参数params
  • 4. Постоянство управления состоянием проекта, напримерvuex的持久化、redux的持久化
  • 5. Общее хранилище состояния переключения проекта, например主题颜色、icon风格、语言标识
  • 6 и т. д.,

общего пользования

Затем, я считаю, что мы все используем это так (возьмитеlocalStorageпример)

1. Основные переменные

// 当我们存基本变量时
localStorage.setItem('基本变量', '这是一个基本变量')
// 当我们取值时
localStorage.getItem('基本变量')
// 当我们删除时
localStorage.removeItem('基本变量')

2. Ссылочные переменные

// 当我们存引用变量时
localStorage.setItem('引用变量', JSON.stringify(data))
// 当我们取值时
const data = JSON.parse(localStorage.getItem('引用变量'))
// 当我们删除时
localStorage.removeItem('引用变量')

3. Очистить

localStorage.clear()

В чем проблема?

1. Название слишком простое

  • 1. Например, когда мы храним информацию о пользователе, мы будем использоватьuserхранить как ключ
  • 2. Используйте при сохранении темthemeхранить как ключ
  • 3. Используйте при хранении токеновtokenхранить как ключ

На самом деле это очень проблематично.Все мы знаем, что два проекта одного происхождения, ихlocalStorageсовместимы.

Приведу пример, например, у меня сейчас два проекта, они в одном ориджинеhttps://www.sunshine.comДалее оба проекта нужно перейти вlocalStorageхранить ключ какnameзначение, то это приведет кnameЯвление замены друг друга, т.互相污染现象:

截屏2021-11-10 下午10.19.09.png

2. Своевременность

мы все знаемlocalStorage、sessionStorageЖизненные циклы этих двух

  • localStorage: сохраняется, если не очищается вручную
  • sessionStorage: конец жизни при закрытии текущей вкладки или закрытии браузера

На самом деле, в обычном использовании нет проблем, но очень важно добавить конкретную своевременность в некоторые назначенные кэши! Например, один день:

  • Бэкенд: «Брат, я дам тебе токен, как только ты войдешь в систему»
  • Фронтенд: "Хорошо, тогда вы должны судить, кстати, срок действия токена истек?"
  • Бэк-энд: «Нет, поместите это на свой интерфейс, чтобы определить дату истечения срока действия»
  • Фронт-энд: "Хорошо..."

В настоящее время, поскольку нам нужно судить об истечении срока действия на переднем конце, мы должны датьtokenустановить своевременность или1天,или7天

截屏2021-11-10 下午10.48.50.png

3. Секретность

На самом деле это легко понять, вы вдумайтесь, когда мы кладем то, что хотим кэшировать, естьlocalStorage、sessionStorageВ процессе разработки это действительно полезно для нашего развития.Когда мы хотим увидеть это, это ясно с первого взгляда.НажмитеApplicationты можешь видеть.

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

截屏2021-11-10 下午11.02.24.png

или мы делаем状态管理持久化Когда данные должны существовать в первую очередьlocalStorageВ это время необходимо зашифровать кеш.

решение

1. Соглашение об именах

Моё личное мнение такое项目名 + 当前环境 + 项目版本 + 缓存key, если у вас есть другие правила, вы можете сообщить Линь Сансиню в области комментариев, и пусть Лин Сансинь выучит

截屏2021-11-11 下午9.12.32.png

2, время истечения срока действия

Идея: установить кешkeyкогда будетvalueУпакованный в объект, объект имеет соответствующие时效时段, в следующий раз, когда вы захотите получить кэшированное значение, оцените, есть ли тайм-аут, и получите его без тайм-аута.value, удалить кеш после тайм-аута

截屏2021-11-11 下午9.33.00.png

3. Криптографическое шифрование

Шифрование простое, используйте напрямуюcrypto-jsДля шифрования данных используйтеencrypt、decrypytпровести加密、解密

截屏2021-11-11 下午9.43.16.png

упражняться

На самом деле, это относительно просто на практике, это не что иное, как четыре шага.

  • 1. Обсудите с командойkeyформат
  • 2. Обсудите с командойexpireдлина
  • 3. Обсудить с командой какую библиотеку использовать для шифрования кеша (личная рекомендацияcrypto-js)
  • 4. Реализация кода (не сложно, писать не буду)

Эпилог

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

Если вы считаете, что эта статья вам немного поможет, поставьте лайк и поддержите Линь Сансиня, ха-ха.

Если вы хотите изучать интерфейс или рыбачить вместе, вы можете добавить меня, присоединиться к моей группе по изучению рыбы, нажмите здесь. --->коснуться точки кипения рыбы

Если у вас есть другие цели, не добавляйте меня, я не хочу с вами дружить, я просто хочу освоить фронтенд, я не хочу заниматься некоторыми вещами! ! !

Категории