Что такое localStorage

Локальное хранилище позволяет хранить данные в виде пары ключ\значение в браузере на стороне клиента. Операции с данными в хранилище осуществляются при помощи JavaScript.

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

Как пользоваться localStorage

Говоря языком JavaScript, то localStorage это свойство глобального объекта браузера window. К нему можно обращаться как window.localStorage или просто localStorage.

Основные методы и свойства использования:

setItem(key, value)  /* сохранить пару ключ/значение */
getItem(key)  /* получить данные по ключу key */ 
removeItem(key)  /* удалить данные с ключом key */ 
clear()  /* удалить всё */ 
key(index)  /* получить ключ на заданной позиции */ 
length  /* количество элементов в хранилище */  

Применение на практике:

// установить значение для ключа myData
localStorage.myData = "Hello World";

// получить значение по ключу - myData
alert(localStorage.myData); // Hello World

// удалить ключ myData
localStorage.removeItem("myData");

//очищаем все хранилище
localStorage.clear()

Локальное хранилище работает только с данными типа string (строка). Если необходимо сохранить объект или массив в хранилище, то можно поступить так:

let config = {
	port: 210,
	user: 'root'
}

localStorage.setItem('conf', JSON.stringify(config)); 

Но при получении этих данных из хранилища, чтобы можно было пользоваться ими снова как объектом нужно вернуть тип данных object.

let newConf = localStorage.getItem('conf');
newConf = JSON.parse(newConf);

К содержанию ↑

Где посмотреть данные localStorage

Посмотреть данные сохраненные в хранилище можно в браузере в Инструментах разработчика, во вкладке Хранилище -> Локальное хранилище

Размер web хранилища зависит от браузера, в Mozilla Firefox, Google Chrome и Opera — 5 Мбайт на домен и 10 Мбайт в Internet Explorer

Плюсы и факты о localStorage

• При записи в локальное хранилище данные не отправляются на сервер
• Все операции выполняются на стороне клиента
• Данные сохраняются при обновлении страницы и не только
• Много места для хранения (в среднем от 2 до 5 мб)
• Хранилище привязано к источнику (домен/протокол/порт)
• Данные не имеют срока хранения
• Ключ и Значение должны быть строками
• Совместно используется между всеми вкладками и окнами с одинаковым источником (url)
• Легкость использования