Локальное хранилище localStorage и sessionStorage | тренируйте навык убеждения каждый день

внешний интерфейс HTML
Локальное хранилище localStorage и sessionStorage | тренируйте навык убеждения каждый день

Привет всем, яКороль Демонов Нэчжа, приятно познакомиться~~

Жизненное кредо Нэчжи:Если вам нравится то, что вы изучаете, у вас будет сильная мотивация.

Изучая программирование каждый день, вы будете в шаге от своей мечты. Спасибо каждому программисту, который любит программирование. Какими бы замечательными ни были ваши знания, пойдемте со мной, чтобы успокоить это блуждающее сердце, продолжайте, давай,2021Ну давай же! Добро пожаловать, чтобы подписаться и добавить меняvx:xiaoda0423, добро пожаловать, лайкайте, добавляйте в избранное и комментируйте

Не бойтесь мечтать, но не просто мечтайте, будьте деятелем, а не болтуном, и делайте все возможное.

предисловие

Если эта статья вам поможет, ❤️Подпишитесь+Нравится❤️Поддержите автора, вы приняли вызов? Публичный аккаунт статьи публикуется впервые, обратите вниманиеПрограммист ДораэмонПолучите последние статьи в первый раз

Пополнение ❤️~

Точка знаний

использоватьHTML5серединаWeb Storage API, допустимыйКлиент хранит больше данных,МогуРеализуйте совместное использование данных и даже синхронизацию между несколькими страницами., для сложных данных вы можете использовать API базы данных Web SQL для достижения.

владелецlocalStorage 和 sessionStorageМетод хранения, храните данные объекта JSON, используйте базовую операцию базы данных Web SQL.

Web Storage

Web Storage APIсвойства, методы, события.

cookieМожет использоваться для передачи небольших объемов данных, имеет встроенный механизм передачи текстовых значений туда и обратно между сервером и клиентом, сервер можетcookieОтслеживайте информацию о доступе пользователей на разных страницах.

cookieспециальность:

Первый,предельный размер, размер файла cookie ограничен 4 КБ.

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

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

четвертый,сложная операция, В клиентском браузере сложнее использовать JavaScript для управления данными cookie.

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

что такое веб-хранилище

Web StorageБольшой объем данных может быть сохранен на стороне клиента,Web StorageПреимущества локального хранилища:

Во-первых, емкость хранилища большая.

Во-вторых, нулевая пропускная способность. Данные в веб-хранилище хранятся только локально, без какого-либо взаимодействия с сервером, и нет проблем с пропускной способностью сети.

В-третьих, интерфейс программирования. Предоставляет богатый набор интерфейсов для более удобной работы с данными.

В-четвертых, независимое место для хранения. Каждый домен имеет независимое пространство для хранения, и каждое хранилище полностью независимо, что не вызовет путаницы в данных.

локальное хранилище и хранилище сессий

существуетWeb Storageлокальное хранилище включаетsessionStorageхранение сессий иlocalStorageлокальное хранилище.

cookie 和 sessionЭто полностью серверные данные, которыми можно манипулировать.sessionStorage 和 localStorageЭто полностью данные, которыми манипулируют на стороне браузера.

cookie 和 sessionполностью наследует то же самоеStorage API, такsessionStorage 和 localStorageИнтерфейс программирования тот же.

sessionStorage 和 locatlStorageРазница в том, что данные существуютлимит времениа такжедиапазон страниц.

sessionStorage: только данныеСохранить, когда окно или вкладка, где он хранится, закрывается, данные также видны внутри окна или вкладки, в которой они созданы

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

Мониторинг того, поддерживается ли веб-хранилище

Пример:

function CheckStorageSupport() {
 // 监测 sessionStorage
 if(window.sessionStorage) {
  console.log(“浏览器支持sessionStorage”);
 }else{
  console.log("浏览器不支持sessionStorage");
 }
 
 // 监测localStorage
 if(window.localStorage) {
  console.log("浏览器支持localStorage");
 }else {
  console.log("浏览器不支持localStorage");
 }
}

Установить и получить данные хранилища

Сохранить данные вsessionStorage:

window.sessionStorage.setItem("key”,"value");

setItem()Представляет метод сохранения данных

отsessionStorageПолучить данные из:

value = window.sessionStorage.getItem("key");

getItem()метод получения данных

Как сохранить данные:

window.sessionStorage.key = "value";

или

window.sessionStorage["key"] = "value"

Способ получения данных более прост:

value = window.sessionStorage.key;

или

value = window.sessionStorage["key"]

Используйте sessionStorage и localStorage

Пример:

function DaDa() {
 window.localStorage.setItem("localKey", "localVlaue");
 
 // 获取
 console.log(window.localStorage.getItem("localKey"));
 
 window.sessionStorage.setItem("sessionKey", "sessionValue");
 
 // 获取
 console.log(window.sessionStorage.getItem("sessionKey"));
}

Интерфейс хранилища

Пример:

interface Storage{
 readonly attribute unsigned long length;
 DOMString ? key(unsigned long index);
 getter DOMString getItem(DOMString key);
 setter creator void setItem(DOMString key, DOMString value);
 deleter void removeItem(DOMString key);
 void clear();
}
  1. lengthатрибут, указывающий текущийstorageКоличество пар ключ/значение, хранящихся в объекте.

Storageобъекты гомологичны,lengthСвойства могут отражать только количество пар ключ/значение одного и того же происхождения.

  1. keyметод получения ключа в указанном месте.

  2. getItemметод, который возвращает соответствующее значение данных в соответствии с ключом.

  3. setItemметод для хранения данных в месте, соответствующем указанному ключу.

  4. removeItemметод для удаления указанной пары ключ/значение из сохраненного объекта.

  5. clearМетод, ясноStorageВсе данные в объекте, такие какStorageОбъект пустой, ничего не делать.

Используйте объект Storage для сохранения содержимого страницы

Пример:

// 保存数据到sessionStorage

function SaveStorage(frm) {
 var storage = window.sessionStorage;
 
 storage.setItem("name",frm.name.value);
 
 storage.setItem("age", frm.age.value);
}

遍历显示sessionStorage中的数据

function Show(){
 var storage = window.sessionStorage
 var result = "";
 for(var i=0; i<storage.length; i++){
  var key = storage.key(i);
  var value = storage.getItem(key);
  result += key + ":" + value + ";";
 }
}

Сохраняет данные в объектах JSON

StorageДанные сохраняются в виде строки, поэтому при сохраненииJSONПеред форматированием данных необходимо поставитьJSONформатировать данные в строку, эта операция называетсяСериализация.

использоватьJSON.stringify()СериализацияjsonДанные в формате являются строковыми данными:

var dada = JSON.stringify(jsonObject);

Десериализовать данные вJSONФормат:

var jsonObject = JSON.parse(stringData);

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

window.addEventListener("storage", EventHandle, true);

StorageEventИнтерфейс события:

interface StorageEvent:Event {
 readonly attribute DOMString key;
 readonly attribute DOMString ? oldValue;
 readonly attribute DOMString ? newValue;
 readonly attribute DOMString ? url;
 readonly attribute Storage? storageArea;
}

keyАтрибут: содержит ключ, что магазин всегда обновляется или удаляется;oldValueАтрибут: содержит данные, соответствующие ключу до обновления.

newValueАтрибут: содержит обновленные данные;urlатрибут: указать наStorageИсточник события.

storageAreaАтрибут: Атрибут — это ссылка, указывающая на значение, которое изменилось.localStorage或sessionStorage.

web SQL Database

Web SQL DatabaseИспользуется база данных SQLite, позволяющая приложениям получать доступ к базе данных через асинхронный интерфейс JavaScript. SQLite — это легкая база данных.

  1. openDatabase()используйте существующую базу данных или создайте новую базу данных для создания объекта базы данных.
  2. transaction()метод, который позволяет разработчику контролировать фиксацию или откат транзакции.
  3. executeSql()способ выполнения реальных SQL-запросов.

Манипулировать базой данных Web SQL

var db = openDatabase("TestDB", "1.0", "测试", xxxx)

Всего 5 параметров:

  1. имя хранилища данных
  2. номер версии
  3. Описание базы данных
  4. размер базы данных
  5. Создайте функцию обратного вызова

Создать таблицу данных

transaction()метод используется для обработки транзакций,executeSql()метод используется для выполнения инструкции sql.

Создайте таблицу данных:

db.transaction(function (tx) {
 tx.executeSql('CREATE TABLE IF NOT EXISTS UserName (id unique, Name)');
});

transaction()tx, переданный методом функции обратного вызова, представляет собойtransactionобъект, используяtransactionобъектexecuteSql()Методы могут выполнять операторы SQL.

Добавьте данные в таблицу данных:

db.transaction(function (tx){
 tx.executeSql('INSERT INTO UserName (id,Name) VALUES(1,'dada'));
 tx.executeSql('INSERT INTO UserName (id,Name) VALUES (2,'dadada'));
});

Чтение данных из базы данных:

db.transaction(function (tx){
 tx.executeSql('SELECT * FROM UserName', [], function(tx, resultes){
  var len = results.rows.length;
  for (var i=0; i<len; i++){
   console.log(results.rows.item(i).Name);
  }
 },null);
});

Несколько форм хранения html5

  1. локальное хранилище -localStorage, sessionStorage
  2. Автономный кешapplication cache
  3. indexedDB 和 webSQL

локальное хранилище и хранилище сессий

  • localStorageХранится постоянно, срок действия не истекает, если только он не удален вручную
  • sessionStorageОн исчезает при повторном открытии браузера

размер, каждое доменное имя5M, куки ограничены размером, во-первых, около 4К, во-вторых, есть ограничение на количество куки под доменным именем ie6.

HTML API

В браузере есть два API,localStorage和sessionStorage

windowВ объекте:localStorageвести перепискуwindow.localStorage,sessionStorageвести перепискуwindow.sessionStorage.

localStorageПока он находится под тем же протоколом, тем же именем хоста и тем же портом, одна и та же копия может быть прочитана или изменена.localStorageДанные.

sessionStorageСравниватьlocalStorageБолее строгие, кроме протокола, имени хоста, порта,Также требуется находиться под одним окном

Метод и смысл:

setItem(‘key’,‘value’)	储存数据

getItem(‘key’)	读取数据

removeItem(‘key’)	删除数据

clear()	清空数据

Подробное объяснение использования:

//储存数据
window.localstage.setItem('key','value')
// key : 数据的名称
// value : 数据
// 所存储的是数据必须是string类型

//读取数据
window.localstage.getItem('key')
// key : 数据的名称
// 如果数据不存在，返回null (一般用它做判断)

//删除数据
window.localstage.removeItem('key')
// key : 数据的名称
// 删除本地存储中的指定数据

//清空数据
window.localstage.clear()
// 清空本地存储中的所有数据

Что такое localStorage и sessionStorage?

localStorage(длительное хранение),sessionStorage(хранилище сеансов) даH5местный вwebДва интерфейса, предоставляемые хранилищем, эквивалентны небольшой локальной базе данных во внешнем интерфейсе, которая используется для локального хранения некоторых неконфиденциальных данных.windowобъект.

Сходства и различия между localStorage и sessionStorage?

Сходство: обаAPIТочно так же все хранят данные на стороне браузера.

разница:

  1. localStorageСохраненные данные являются постоянными данными, страница обновляется, даже если перезапускается браузер, даже перезагружается операционная система, они не будут потеряны, а сохраненные данные находятся в том же источнике (согласованный протокол, имя домена, номер порта) в вкладка иwindowразделены между окнами.

  2. sessionStorageСохраненные данные немного жестковаты, обновления страниц все еще работают, данные теряются при закрытии вкладки. Но несколько открытых на одной вкладкеiframeДанные могут быть разделены между ними (в случае гомологии).

Оба хранят данные на стороне браузера,localStorageСохраняемые данные ограничены одним и тем же источником и могут передаваться между окнами, но не между браузерами и доменами;sessionStorageСохраняемые данные ограничены страницами с вкладками (страницы теряются при закрытии карты).

Ограничения локального хранилища

Ограничения:

1. Размер, поддерживаемый каждым браузером, отличается, в отрасли считают, что это5M, и поддержка разная в разных версиях разных браузеров

2.localStorageДанные не могут быть просканированы поисковыми роботами

Недавно рекомендовано

❤️Подписывайтесь + лайк + избранное + комментарий + пересылка ❤️, оригинальность непроста, поощряйте автора создавать лучшие статьи

Нравится, добавляете в избранное и комментируете

яJeskson(Dada front-end), спасибо за ваши таланты:Нравится, добавляете в избранное и комментируете, увидимся в следующий раз! (Если что-то не так с объяснением в этой статье, укажите ☞Спасибо, будем учиться вместе)

Увидимся в следующий раз!

Статья постоянно обновляется, вы можете искать в WeChat "Программист Дораэмон"Прочитайте ее впервые и ответьте на [Информацию] Я подготовил информацию о производителях первой линии, эта статьяwww.dadaqianduan.cn/#/был записан

githubвключено, добро пожаловатьStar:GitHub.com/веб-блог VUE/…

Категории