Javascript怎样使用SessionStorage和LocalStorage

使用SessionStorage和LocalStorage可以在客户端存储、读取数据，从而实现一些常见的功能，例如用户登录状态的保持、表单数据的保存等等。SessionStorage一般用于临时保存会话数据，当用户关闭浏览器时会被清除；而LocalStorage可以长期存储，直到用户手动删除或者浏览器清除缓存。

SessionStorage的使用

存储数据

可以使用sessionStorage对象的setItem方法来存储数据，例如：

sessionStorage.setItem("username", "John");
sessionStorage.setItem("email", "[e-mail]");

读取数据

可以使用sessionStorage对象的getItem方法来读取数据，例如：

let username = sessionStorage.getItem("username");
let email = sessionStorage.getItem("email");

console.log(username); // 输出 "John"
console.log(email); // 输出 "[e-mail]"

示例1：保存表单数据

可以在表单提交时，将表单数据保存到sessionStorage中，待用户下次访问页面时再恢复。示例代码如下：

<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <button type="submit">Submit</button>
</form>

<script>
  // 获取表单元素
  let myForm = document.querySelector("#myForm");
  let usernameInput = document.querySelector("#username");
  let passwordInput = document.querySelector("#password");

  // 表单提交事件
  myForm.addEventListener("submit", function(event) {
    // 阻止表单默认提交
    event.preventDefault();

    // 将表单数据保存到sessionStorage中
    sessionStorage.setItem("username", usernameInput.value);
    sessionStorage.setItem("password", passwordInput.value);

    // 跳转到其他页面
    location.href = "other-page.html";
  });

  // 页面加载事件
  window.addEventListener("load", function(event) {
    // 恢复表单数据
    usernameInput.value = sessionStorage.getItem("username") || "";
    passwordInput.value = sessionStorage.getItem("password") || "";
  });
</script>

示例2：保存用户登录状态

可以在用户登录成功后，将登录状态通过sessionStorage保存，然后在访问其他需要登录的页面时，检查sessionStorage中是否保存了登录状态，如果没有则跳转到登录页面。示例代码如下：

// 用户登录成功后，保存登录状态
sessionStorage.setItem("isLogin", "true");

// 另一个需要登录的页面
if (sessionStorage.getItem("isLogin") !== "true") {
  // 未登录，跳转到登录页面
  location.href = "login.html";
}

LocalStorage的使用

存储数据

可以使用localStorage对象的setItem方法来存储数据，例如：

localStorage.setItem("username", "John");
localStorage.setItem("email", "[e-mail]");

读取数据

可以使用localStorage对象的getItem方法来读取数据，例如：

let username = localStorage.getItem("username");
let email = localStorage.getItem("email");

console.log(username); // 输出 "John"
console.log(email); // 输出 "[e-mail]"

示例3：记住用户偏好设置

可以让用户在一个设置页面中修改一些偏好设置，例如主题颜色、字体大小等等，然后将这些设置保存到localStorage中，在其他页面应用这些设置。示例代码如下：

<label for="theme">Theme:</label>
<select id="theme">
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

<label for="fontSize">Font size:</label>
<select id="fontSize">
  <option value="small">Small</option>
  <option value="medium">Medium</option>
  <option value="large">Large</option>
</select>

<script>
  // 获取元素
  let themeInput = document.querySelector("#theme");
  let fontSizeInput = document.querySelector("#fontSize");

  // 设置页面加载事件
  window.addEventListener("load", function(event) {
    // 恢复偏好设置
    themeInput.value = localStorage.getItem("theme") || "light";
    fontSizeInput.value = localStorage.getItem("fontSize") || "medium";

    // 应用偏好设置
    applyTheme(themeInput.value);
    applyFontSize(fontSizeInput.value);
  });

  // 设置偏好设置变化事件
  themeInput.addEventListener("change", function(event) {
    localStorage.setItem("theme", themeInput.value);
    applyTheme(themeInput.value);
  });

  fontSizeInput.addEventListener("change", function(event) {
    localStorage.setItem("fontSize", fontSizeInput.value);
    applyFontSize(fontSizeInput.value);
  });

  // 实际应用主题样式
  function applyTheme(theme) {
    let body = document.querySelector("body");
    if (theme === "light") {
      body.classList.remove("dark");
    } else {
      body.classList.add("dark");
    }
  }

  // 实际应用字体大小样式
  function applyFontSize(size) {
    document.documentElement.style.fontSize = {
      small: "12px",
      medium: "14px",
      large: "16px"
    }[size];
  }
</script>