将数据保存到本地存储

Question

将数据保存到本地存储

29

我试图在本地存储中设置一堆变量，但函数没有运行，我尝试获取值但没有成功，如何在本地存储中保存字段？

function setPerson(){
var person = { 'name': getElementById('name'), 'photo': getElementById('photo')};

// Put the object into the storage
    alert(person);
    localStorage.setItem('person', JSON.stringify(person));
};

HTML 在 HTML 中，我从输入字段中放置值到标签中，它们被填充了，但是当我尝试获取并保存它们时，什么都没有发生...

我还尝试将固定值放在那里，然后显示警报，但是只显示对象而不是值。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
alert('retrievedObject: ', JSON.parse(retrievedObject));;

- user3637210

我在另一个表单中调用它，我可以看到它被调用了。 - user3637210

3

不要使用 alert 进行调试，应该使用 console！由于你有一个复杂的对象，所以 alert 总是会显示 [Object Object]。 - tymeJV

好的，仍然无法接收它。 - user3637210

如果你想使用alert，你应该使用“+”而不是“，”：alert（'retrievedObject：'+ JSON.parse（retrievedObject））; - advncd

5个回答

6

首先，你应该使用console而不是alert。

如果你想在其他地方使用检索到的对象，最好将其存储在变量中：

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));
console.log('retrievedObject: ', retrievedObject);

- advncd

我相信OP的意思是在会话之间。 - Wes Modes

2

W3C Schools提供了有关如何使用html和本地存储的详细示例。

w3cSchools - 本地存储

- Mensur Grišević

0

问题是 getElementById 返回一个 HTML 元素，这是一个对象。

然后，JSON.stringify 将尝试迭代它自己的属性。

但很可能它们没有任何属性（除非你手动添加）。

既然你说它们是字段，你可以尝试保存它的 value。

var person = {
    name: document.getElementById('name').value,
    photo: document.getElementById('photo').value
};

- Oriol

0

getElementById 应该被更改为

    document.getElementById

同时这将获取整个DOM元素。我猜你想要标签内的内容，所以我建议使用

    document.getElementById('name').innerHTML

相反，只是引用DOM元素将在尝试字符串化它时给出循环结构错误。

我已确认可行的示例代码：

<html>
<head>
</head>
<body>
<p id="name">Hello</p>
<p id="photo">photo</p>
<script>

function setPerson(){
var person = { 'name': document.getElementById('name').innerHTML, 'photo':    document.getElementById('photo').innerHTML};

// Put the object into storage
localStorage.setItem('person', JSON.stringify(person));
}
setPerson()
</script>
</body>
</html>

- VSarin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan · Accepted Answer

您可以像这样使用localStorage：

// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || {};

// Store your data.
function saveStuff(obj) {
  saveData.obj = obj;
  // saveData.foo = foo;
  saveData.time = new Date().getTime();
  localStorage.saveData = JSON.stringify(saveData);
}

// Do something with your data.
function loadStuff() {
  return saveData.obj || "default";
}

2022 年更新：
由于仍有人查看此页面，以下是更现代化的版本。我喜欢将这类东西包装在一个服务中，以便给您更多的控制和类型安全性。您可以很容易地添加诸如验证和错误处理之类的内容。

class LocalStorageService {
  #keys = {
    persons: 'persons',
  };

  constructor() {
    this.storage = window.localStorage;
  }

  addPerson(person) {
    const persons = this.getPersons();
    persons.push(person);
    this.setPersons(persons);
  }

  getPersons() {
    return JSON.parse(this.storage.getItem(this.#keys.persons)) || [];
  }

  getPerson(id) {
    const persons = this.getPersons();
    return persons.find((person) => person.id === id);
  }

  setPersons(persons) {
    this.storage.setItem(this.#keys.persons, JSON.stringify(persons));
  }

  removePerson(person) {
    const persons = this.getPersons();
    const index = persons.indexOf(person);
    persons.splice(index, 1);
    this.setPersons(persons);
  }

  clear() {
    this.storage.clear();
  }
}

const storageService = new LocalStorageService();
const person = {
  id: '1',
  name: 'John',
  age: '20',
};

storageService.addPerson(person);

const persons = storageService.getPersons();
console.log(persons);

Web Storage API - MDN