Saving data with javascript

How to save data in localStorage using JavaScript

In this tutorial you’ll learn how to use localStorage a property of the window interface that allows you to access a storage object from the browser. To give you an understanding of how localStorage works we’ll be building a simple note taking application that will save and delete data in the localStorage . Let’s get started by creating a form to add new notes and an unordered list to display the saved notes:

Now for the JavaScript functionality, first we’ll declare variables for the HTML elements we’ll be working with:

const noteForm = document.getElementById("note-form"); const noteInput = document.getElementById("note-input"); const noteSubmit = document.getElementById("note-submit"); const notes = document.getElementById("notes"); 

We’ll also save any existing notes to a noteStorage variable to make them easier to work with. If there isn’t any notes in the localStorage yet we’ll just an empty array:

let notesStorage = localStorage.getItem("notes") ? JSON.parse(localStorage.getItem("notes")) : []; 

noteForm.addEventListener("submit", (e) =>  e.preventDefault(); notesStorage.push(noteInput.value); localStorage.setItem("notes", JSON.stringify(notesStorage)); listBuilder(noteInput.value); noteInput.value = ""; >); 

This pushes the new note into into the notesStorage then updates the notes in the localStorage . We then call a listBuilder function which adds the note to the unordered list element in our HTML markup, here’s the code for that function:

const listBuilder = (text) =>  const note = document.createElement("li"); note.innerHTML = text + ' x'; notes.appendChild(note); >; 

The notes are now being saving in localStorage and displayed in the HTML. However if the page is refreshed the notes would no longer display in the HTML so we need to loop through each of the notes in localStorage when the page is loaded and re-render them in the HTML:

const getNotes = JSON.parse(localStorage.getItem("notes")); getNotes.forEach((note) =>  listBuilder(note); >); 

const deleteNote = (btn) =>  let el = btn.parentNode; const index = [. el.parentElement.children].indexOf(el); notesStorage.splice(index, 1); localStorage.setItem("notes", JSON.stringify(notesStorage)); el.remove(); >; 

This gets the index of the list item to delete and removes it from both the HTML and localStorage . That’s all for this tutorial. Hopefully it’s given you an understanding of how to work with data in the localStorage . A full working example of the code used in this tutorial is available to download from here.

Источник

LocalStorage, sessionStorage

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

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

Но ведь у нас уже есть куки. Зачем тогда эти объекты?

• В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Именно поэтому мы можем хранить гораздо больше данных. Большинство современных браузеров могут выделить как минимум 5 мегабайтов данных (или больше), и этот размер можно поменять в настройках.
• Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
• Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.

Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

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

Как видим, интерфейс похож на Map ( setItem/getItem/removeItem ), но также позволяет получить доступ к элементу по индексу – key(index) .

Давайте посмотрим, как это работает.

Демо localStorage

Основные особенности localStorage :

• Этот объект один на все вкладки и окна в рамках источника (один и тот же домен/протокол/порт).
• Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.

Например, если запустить этот код…

localStorage.setItem('test', 1);

…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:

alert( localStorage.getItem('test') ); // 1

Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.

Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.

Доступ как к обычному объекту

Также можно получать/записывать данные, как в обычный объект:

// установить значение для ключа localStorage.test = 2; // получить значение по ключу alert( localStorage.test ); // 2 // удалить ключ delete localStorage.test;

Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:

Если ключ генерируется пользователем, то он может быть каким угодно, включая length или toString или другой встроенный метод localStorage . В этом случае getItem/setItem сработают нормально, а вот чтение/запись как свойства объекта не пройдут:

let key = 'length'; localStorageSaving data with javascript = 5; // Ошибка, невозможно установить length

Перебор ключей

Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?

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

Но можно пройти по ним, как по обычным массивам:

Другой способ – использовать цикл, как по обычному объекту for key in localStorage .

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

// bad try for(let key in localStorage) < alert(key); // покажет getItem, setItem и другие встроенные свойства >

…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :

for(let key in localStorage) < if (!localStorage.hasOwnProperty(key)) < continue; // пропустит такие ключи, как "setItem", "getItem" и так далее >alert(`$: $`); >

…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:

let keys = Object.keys(localStorage); for(let key of keys) < alert(`$: $`); >

Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.

Только строки

Обратите внимание, что ключ и значение должны быть строками.

Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:

localStorage.user = ; alert(localStorage.user); // [object Object]

Мы можем использовать JSON для хранения объектов:

localStorage.user = JSON.stringify(); // немного позже let user = JSON.parse( localStorage.user ); alert( user.name ); // John

Также возможно привести к строке весь объект хранилища, например для отладки:

// для JSON.stringify добавлены параметры форматирования, чтобы объект выглядел лучше alert( JSON.stringify(localStorage, null, 2) );

sessionStorage

Объект sessionStorage используется гораздо реже, чем localStorage .

Свойства и методы такие же, но есть существенные ограничения:

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

  Давайте посмотрим на это в действии.

  sessionStorage.setItem('test', 1);

  …И обновите страницу. Вы всё ещё можете получить данные:

  alert( sessionStorage.getItem('test') ); // после обновления: 1

  …Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null , что значит «ничего не найдено».

  Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.

  Событие storage

  Когда обновляются данные в localStorage или sessionStorage , генерируется событие storage со следующими свойствами:

  • key – ключ, который обновился ( null , если вызван .clear() ).
  • oldValue – старое значение ( null , если ключ добавлен впервые).
  • newValue – новое значение ( null , если ключ был удалён).
  • url – url документа, где произошло обновление.
  • storageArea – объект localStorage или sessionStorage , где произошло обновление.

  Важно: событие срабатывает на всех остальных объектах window , где доступно хранилище, кроме того окна, которое его вызвало.

  Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.

  Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.

  Теперь, если оба окна слушают window.onstorage , то каждое из них будет реагировать на обновления, произошедшие в другом окне.

  // срабатывает при обновлениях, сделанных в том же хранилище из других документов window.onstorage = event => < // можно также использовать window.addEventListener('storage', event =>< if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); >; localStorage.setItem('now', Date.now());

  Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.

  Также event.storageArea содержит объект хранилища – событие одно и то же для sessionStorage и localStorage , поэтому event.storageArea ссылается на то хранилище, которое было изменено. Мы можем захотеть что-то записать в ответ на изменения.

  Это позволяет разным окнам одного источника обмениваться сообщениями.

  Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.

  Итого

  Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

  • key и value должны быть строками.
  • Лимит 5 Мб+, зависит от браузера.
  • Данные не имеют «времени истечения».
  • Данные привязаны к источнику (домен/протокол/порт).
  • setItem(key, value) – сохранить пару ключ/значение.
  • getItem(key) – получить данные по ключу key .
  • removeItem(key) – удалить значение по ключу key .
  • clear() – удалить всё.
  • key(index) – получить ключ на заданной позиции.
  • length – количество элементов в хранилище.
  • Используйте Object.keys для получения всех ключей.
  • Можно обращаться к ключам как к обычным свойствам объекта, в этом случае событие storage не срабатывает.
  • Срабатывает при вызове setItem , removeItem , clear .
  • Содержит все данные об произошедшем обновлении ( key/oldValue/newValue ), url документа и объект хранилища storageArea .
  • Срабатывает на всех объектах window , которые имеют доступ к хранилищу, кроме того, где оно было сгенерировано (внутри вкладки для sessionStorage , глобально для localStorage ).

  Задачи

  Автосохранение поля формы

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

  Когда пользователь закроет страницу и потом откроет её заново он должен увидеть последнее введённое значение.

  Источник

  Читайте также:  Apache пишет нет php