Краткое описание использования localStorage и sessionStorage

В HTML5 добавлена ​​новая функция localStorage. Эта функция в основном используется в качестве локального хранилища для решения проблемы нехватки места для хранения файлов cookie (объем каждого файла cookie в файле cookie составляет 4 КБ. Поддерживаемый размер локального хранилища для обычных браузеров — 5 МБ). . Это localStorage будет отличаться в разных браузерах.

1. localStorage расширяет лимит файлов cookie размером 4 КБ.

2. LocalStorage может напрямую хранить первые запрошенные данные локально. Это эквивалентно базе данных размером 5 МБ для интерфейсной страницы. По сравнению с файлами cookie это может сэкономить полосу пропускания, но это доступно только в браузерах высокого класса. Поддерживается Zhongcai.

1. Браузеры различаются по размеру, а атрибут localStorage поддерживается только в версиях IE выше IE8.

2. В настоящее время все браузеры ограничивают тип значения localStorage строковым типом. Это требует некоторого преобразования для наших ежедневных распространенных типов объектов JSON.

3. localStorage не читается в режиме конфиденциальности браузера.

4. LocalStorage по существу читает строки. Если вы храните много контента, это будет занимать пространство памяти и вызывать зависание страницы.

5. localStorage не может быть просканирован сканерами.

Единственное различие между localStorage и sessionStorage заключается в том, что localStorage принадлежит постоянному хранилищу, а sessionStorage принадлежит sessionStorage. Когда сеанс завершается, пары ключ-значение в sessionStorage будут очищены.

Здесь мы используем localStorage для анализа

Поддержка браузером localStorage:

Особое замечание здесь заключается в том, что если вы используете браузер IE, то в качестве хранилища будут использоваться UserData. Основным объяснением здесь является содержимое localStorage, поэтому пользовательские данные не будут объясняться слишком подробно, и, по личному мнению блоггера, нет. Необходимо научиться использовать UserData, поскольку текущий IE6/IE7 находится в стадии ликвидации, а разработка многих страниц сегодня включает в себя новые технологии, такие как HTML5/CSS3, поэтому мы обычно не используем их для обеспечения совместимости.

Во-первых, при использовании localStorage нам необходимо определить, поддерживает ли браузер атрибут localStorage.

 if(!window.localStorage){ alert(браузер поддерживает localstorage); return false }else{ //Основная логика}

Существует три метода записи в localStorage. Здесь мы представим их один за другим.

 if(!window.localStorage){ alert(браузер поддерживает localstorage); return false; }else{ var Storage=window.localStorage; //Записываем поле Storage[a]=1; //Записываем поле b. ; //Записываем поле c Storage.setItem(c,3); console.log(typeof Storage[a]); console.log(typeof Storage[b]); хранилище[с]);

Результат после запуска следующий:

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

Конечный результат, напечатанный на консоли:

Я не знаю, заметил ли кто-нибудь из читателей, что то, что только что было сохранено, имело тип int, но было напечатано как тип строки. Это связано с характеристиками самого localStorage. LocalStorage поддерживает только хранение строкового типа.

Чтение localStorage

 if(!window.localStorage){ alert(браузер поддерживает localstorage); }else{ var Storage=window.localStorage; //Записываем поле Storage[a]=1; //Записываем b поле Storage.a=1 // Запишите поле c Storage.setItem(c,3); console.log(typeof Storage[a]); console.log(typeof Storage[b]); Storage[c]); //Первый метод читает var a=storage.a; console.log(a); //Второй метод читает var b=storage[b]; //The третий метод читает var c=storage.getItem(c); console.log(c);

Есть три способа чтения localStorage. Официально рекомендуемыми методами доступа к нему являются getItem/setItem. Не спрашивайте меня, почему, потому что я не знаю.

Ранее я говорил, что localStorage эквивалентен клиентской базе данных. База данных в основном состоит из четырех этапов: добавление, удаление и запрос. Чтение и запись здесь эквивалентны двум этапам добавления и запроса.

Теперь давайте поговорим о двух шагах удаления и изменения localStorage.

Изменение этого шага легче понять. Идея такая же, как и изменение значения глобальной переменной. Здесь мы воспользуемся примером, чтобы кратко объяснить это.

 if(!window.localStorage){ alert(браузер поддерживает localstorage); }else{ var Storage=window.localStorage; //Записываем поле Storage[a]=1; //Записываем b поле Storage.b=1 // Запишите поле c Storage.setItem(c,3); console.log(storage.a); // console.log(typeof Storage[a]); // console.log(typeof); Storage[b]); // console.log(typeof Storage[c]); /*Разделительная линия*/ Storage.a=4; console.log(storage.a);

На консоли мы видим, что ключ a изменен на 4.

Удаление localStorage

1. Очистите все содержимое localStorage.

 var Storage = Window.localStorage; Storage.setItem (c, 3); Storage.clear ();

2. Удалите пару ключ-значение в localStorage.

 var Storage = Window.localStorage; Storage.setItem (c, 3); Storage.removeItem (a); console.log (storage.a);

Просмотр результатов на консоли

получение ключа localStorage

 var Storage = Window.localStorage; Storage.a = 1; Storage.setItem (c, 3); for (var i = 0; i <storage.length; i ++) { var key = Storage.key (i); журнал (ключ);

Используйте метод key(), чтобы получить соответствующий ключ путем входа в индекс и выхода из него.

4. Другие соображения по поводу localStorage

Обычно мы будем хранить JSON в localStorage, но localStorage автоматически преобразует localStorage в строковую форму.

На данный момент мы можем использовать метод JSON.stringify() для преобразования JSON в строку JSON.

Пример:

 if(!window.localStorage){ alert(браузер поддерживает localstorage); }else{ var Storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', хобби:'program' }; =JSON.stringify(данные); Storage.setItem(данные,d); console.log(storage.data);

После прочтения, чтобы преобразовать строку JSON в объект JSON, используйте метод JSON.parse().

 var Storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', хобби:'program' }; var d=JSON.stringify(data); Storage.setItem(data,d); /Преобразовать строку JSON в выходные данные объекта JSON var json=storage.getItem(data); var jsonObj=JSON.parse(json); console.log(typeof); jsonObj);

Распечатанный объект Object

Еще следует отметить, что другие типы необходимо преобразовывать при чтении.