Question

将数据保存到本地存储

2014-05-19

65888

javascript jquery local-storage

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

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));;

Answer 1

您可以像这样使用 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

Answer 2

首先，您应该使用 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);

Answer 3

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

w3cSchools - 本地存储

Mensur Grišević

2017-04-28