Сохранить значение ввода в локальном хранилище

Question

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

allNames = []

function submit() {
  var names = document.getElementById("names").value;
  allNames.push(names);
  localStorage.setItem("names", names)
}

document.getElementById("namesList").innerHTML = allNames

<input id="names" placeholder="Enter Your Party's names">
<button onclick="submit()">Submit</button>

<div id="namesList"></div>

Я бы хотел, чтобы общие имена были сохранены и отображены в теге даже после обновления страницы. Как мне это сделать?

Answer 1

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

Установить данные:

localStorage.setItem('test', 'value');

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

localStorage.getItem('test');

Удалить данные:

localStorage.removeItem('test');

Сначала необходимо загрузить данные в namesList из localStorage, затем отправить просто pu sh в ранее сохраненные данные и сохранить их снова, загрузите новые данные.

Кроме того, чтобы работать должным образом, вам нужно использовать JSON.stringify перед сохранением в localStorage и JSON.parse после получения данных.

С вашим кодом, рабочий пример на jsBin :

function submit() {
  var names = document.getElementById("names").value;
  var allNames = JSON.parse(localStorage.getItem("allNames")) || [];
  allNames.push(names);
  localStorage.setItem("allNames", JSON.stringify(allNames));
  document.getElementById("names").value = '';
  document.getElementById("namesList").innerHTML = localStorage.getItem("allNames");
}

document.getElementById("namesList").innerHTML = localStorage.getItem("allNames");

<input id="names" placeholder="Enter Your Party's names">
<button onclick="submit()">Submit</button>

<div id="namesList"></div>

Answer 2

Вы можете сделать это так.

allNames = localStorage.getItem("names");
if (allNames) allNames = allNames.split(';;;');
document.getElementById("namesList").innerHTML = allNames

function submit() {
  var partnerName = document.getElementById("names").value;
  allNames.push(names);
  localStorage.setItem("namesList", allNames.join(';;;'));
  document.getElementById("namesList").innerHTML = allNames;
}

Answer 3

Вы можете попробовать это

// Store data
var someData = 'The data that I want to store for later.';
localStorage.setItem('myDataKey', someData);

// Get data
var data = localStorage.getItem('myDataKey');

// Remove data
localStorage.removeItem('myDatakey');

DO C

https://developer.mozilla.org/pt-BR/docs/Web/API/Storage/setItem