JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用-前端开发

当涉及到JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)时，我们需要首先了解这两种存储方式的概念和用途。

当涉及到JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)时，我们需要首先了解这两种存储方式的概念和用途。

本地存储(LocalStorage)和会话存储(SessionStorage)

本地存储(LocalStorage)和会话存储(SessionStorage)都是HTML5中Web StorageAPI的一部分。它们提供了在浏览器中存储数据的简单方法，无需依靠服务器。

本地存储(LocalStorage)

本地存储(LocalStorage)允许我们在浏览器关闭后，保留存储在其中的数据。它的数据大小限制为5MB左右。我们只需使用JavaScript的几个简单命令就可以访问本地存储。

以下是LocalStorage的一些重要方法：

localStorage.setItem: 存储键值对数据，如果key已经存在则覆盖
localStorage.getItem: 获取在localStorage中指定key的值
localStorage.removeItem: 从LocalStorage中删除指定键的键值对
localStorage.clear:删除所有localStorage的键值对

以下代码示例展示了如何使用LocalStorage在浏览器中存储和获取数据：

localStorage.setItem("name", "Alice");
localStorage.setItem("age", "24");

console.log(localStorage.getItem("name"));
console.log(localStorage.getItem("age"));

输出：

Alice
24

会话存储(SessionStorage)

会话存储(SessionStorage)与LocalStorage类似，但是会话存储只能在浏览器窗口或标签页关闭之前保存数据。一旦关闭，所有数据就会被清除。我们可以使用与LocalStorage相同的方法来操作会话存储。

以下是SessionStorage的一些重要方法：

sessionStorage.setItem: 存储键值对数据，如果key已经存在则覆盖
sessionStorage.getItem: 获取在sessionStorage中指定key的值
sessionStorage.removeItem: 从sessionStorage中删除指定键的键值对
sessionStorage.clear: 删除所有sessionStorage的键值对

以下代码示例展示了如何使用SessionStorage在浏览器中存储和获取数据：

sessionStorage.setItem("username", "Jack");
sessionStorage.setItem("password", "123456");

console.log(sessionStorage.getItem("username"));
console.log(sessionStorage.getItem("password"));

输出：

Jack
123456

实战应用

示例一：记住用户选择

在这个示例中，我们将介绍如何使用LocalStorage记录用户选择的主题，并在下一次会话中自动应用该选择。

function setTheme(theme) {
  //将选择的主题保存到LocalStorage
  localStorage.setItem("theme", theme);
  // 将文档的样式class设置为所选主题
  document.body.className = theme;
}

// 载入文档时，检查LocalStorage中是否有保存的主题
function loadTheme() {
  let theme = localStorage.getItem("theme");
  if (theme) {
    //如果保存了主题，则将文档的样式class设置为所选主题
    document.body.className = theme;
    // 设置选择框的选中状态
    document.getElementById(theme).checked = true;
  }
}

//当用户选择新的主题时，调用setTheme()函数来更新LocalStorage和文档样式
document.querySelectorAll("input[type=radio]").forEach((radio) => {
  radio.addEventListener("click", () => {
    setTheme(radio.id);
  });
});

// 在窗口加载时载入保存的主题
loadTheme();

在上面的代码中，我们使用LocalStorage存储用户选择的主题，使得下一次打开网站时，可以自动应用上次的选择。

示例二：存储表单数据

以下是一个基本的表单页面，我们将使用SessionStorage存储表单数据。

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" />

  <label for="email">电邮:</label>
  <input type="email" id="email" name="email" />

  <label for="message">留言:</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit" id="submit">提交</button>
</form>

以下是将表单数据保存到SessionStorage中的代码示例：

const form = document.querySelector("form");
const submitButton = document.querySelector("#submit");

//监听表单提交
form.addEventListener("submit", (event) => {
  //阻止默认表单提交行为
  event.preventDefault();

  //创建一个FormData对象来收集表单数据
  const formData = new FormData(form);

  //将FormData对象中的数据转换成JSON格式字符串
  const jsonData = JSON.stringify(Object.fromEntries(formData.entries()));

  //将JSON数据保存到SessionStorage中
  sessionStorage.setItem("formData", jsonData);

  //重定向到另一个页面
  window.location.href = "another-page.html";
});

//在表单上显示SessionStorage中保存的数据
if (sessionStorage.formData) {
  const data = JSON.parse(sessionStorage.formData);
  document.querySelector("#name").value = data.name;
  document.querySelector("#email").value = data.email;
  document.querySelector("#message").value = data.message;
  sessionStorage.removeItem("formData");
}