使用JavaScript将数据保存到本地存储

在Web应用程序中，我们经常需要保存数据以供以后使用。JavaScript提供了一种简单的方法来实现这一目标 - 使用本地存储。本地存储是一种机制，可将数据存储在用户浏览器中，以便在用户浏览同一网站的不同页面时使用。本文将介绍如何使用JavaScript来保存和检索数据，并提供一些示例代码。

本地存储

本地存储有两种类型：本地存储和会话存储。本地存储，也称为本地存储对象（LocalStorage），是一种可以跨不同浏览器窗口或标签页存储数据的标准方式。会话存储，也称为会话存储对象（SessionStorage），只能在浏览器窗口或标签页会话期间存储数据。

对于本地存储，可以使用以下两个方法将数据保存在本地存储对象中：

• localStorage.setItem(key, value)：将键/值对存储在localStorage中。
• localStorage.getItem(key)：从localStorage中检索与给定键关联的值。

以下是一个示例：

// 保存数据
localStorage.setItem("name", "John");

// 检索数据
var name = localStorage.getItem("name");
console.log(name); // "John"

请注意，值必须为字符串。如果值不是字符串，则必须将其转换为字符串：

// 保存数字
localStorage.setItem("age", String(30));

// 检索数字
var age = parseInt(localStorage.getItem("age"), 10);
console.log(age); // 30

如果您要保存一个对象，则必须将其序列化为字符串，然后在检索数据时将其反序列化：

// 保存对象
var user = {
  name: "John",
  age: 30
};
localStorage.setItem("user", JSON.stringify(user));

// 检索对象
var userStr = localStorage.getItem("user");
var userObj = JSON.parse(userStr);
console.log(userObj.name); // "John"
console.log(userObj.age); // 30

示例

以下是一个示例，演示如何使用本地存储来保存和检索数据。该示例使用了一个简单的HTML表格，其中每个行都代表一个人员条目。

这个示例提供添加和删除人员条目的功能，代码片段如下（注释已添加）：

// 获取表格元素
var table = document.querySelector("#myTable");

// 获取添加行按钮
var addButton = document.querySelector("#addButton");

// 获取保存按钮
var saveButton = document.querySelector("#saveButton");

// 获取清除按钮
var clearButton = document.querySelector("#clearButton");

// 初始化数组以存储人员数据
var people = [];

// 从本地存储检索人员数据
var storedPeople = localStorage.getItem("people");
if (storedPeople) {
  people = JSON.parse(storedPeople);
  for (var i = 0; i < people.length; i++) {
    var person = people[i];
    addRow(person.name, person.age);
  }
}

// 添加行函数，使用insertRow()、insertCell()和innerHTML
function addRow(name, age) {
  var row = table.insertRow(-1);
  var nameCell = row.insertCell(0);
  var ageCell = row.insertCell(1);
  nameCell.innerHTML = name;
  ageCell.innerHTML = age;
}

// 删除行函数，使用deleteRow()
function deleteRow(index) {
  table.deleteRow(index);
}

// 添加按钮侦听器
addButton.addEventListener("click", function() {
  var name = prompt("请输入姓名：");
  var age = prompt("请输入年龄：");
  addRow(name, age);
  people.push({name: name, age: age});
});

// 保存按钮侦听器
saveButton.addEventListener("click", function() {
  localStorage.setItem("people", JSON.stringify(people));
});

// 清除按钮侦听器
clearButton.addEventListener("click", function() {
  localStorage.clear();
  location.reload();
});

这个示例允许用户添加人员数据到表格中，并使用本地存储将其保存起来。它还提供了删除人员数据的功能，以及清除本地存储中的所有数据的功能。

总结

本地存储为Web应用程序提供了一种简单的方法来保存和检索数据。JavaScript使其易于使用。我们希望这篇文章能够帮助您开始使用本地存储，为您的Web应用程序提供更好的用户体验和功能。