javascript - 将数据保存到本地存储

Question

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

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