JavaScript
Веб-хранилище

Синтаксис

• localStorage.setItem (имя, значение);

• localStorage.getItem (имя);

• localStorage.name = значение;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (имя);

параметры

замечания

Использование localStorage

Объект localStorage обеспечивает постоянное (но не постоянное - см. Ниже) хранилище строк для ключей. Любые изменения сразу отображаются во всех других окнах / кадрах из одного и того же источника. Сохраненные значения сохраняются неопределенно долго, если пользователь не очистит сохраненные данные или не установит лимит срока действия. localStorage использует картографический интерфейс для получения и установки значений.

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

Если вы хотите хранить простые структурированные данные, вы можете использовать JSON для его сериализации в строки и из строк для хранения.

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

Ограничения localStorage в браузерах

Мобильные браузеры:

Настольные браузеры:

События хранения

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

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

Заметки

Событие не запускается или недоступно в Chrome, Edge и Safari, если домен был изменен с помощью скрипта.

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

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

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

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

sessionStorage.setItem('key', 'value');

Получить сохраненные данные из sessionStorage

var data = sessionStorage.getItem('key');

Удаление сохраненных данных из sessionStorage

sessionStorage.removeItem('key')

Очистка хранилища

Чтобы очистить хранилище, просто запустите

localStorage.clear();

Условия ошибки

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

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

Если ошибка не была обработана, программа перестанет нормально функционировать.

Удалить элемент хранилища

Чтобы удалить определенный элемент из Хранилища браузера (напротив setItem ), используйте removeItem

localStorage.removeItem("greet");

Пример:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

(То же самое относится к sessionStorage )

Упрощенный способ хранения Хранение

localStorage , sessionStorage - это объекты JavaScript, и вы можете рассматривать их как таковые.
Вместо использования методов хранения, таких как .getItem() , .setItem() и т. Д., Вот более простая альтернатива:

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

Пример:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

localStorage length

localStorage.length возвращает целое число, указывающее количество элементов в localStorage

Пример:

Установить позиции

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

Получить длину

localStorage.length; // 3