jQuery实现本地存储

下面是详细的讲解：

什么是本地存储？

在Web开发中，常常需要将一些数据保存在客户端内，这些数据可能会被多个页面使用，而不仅仅是一个页面。在这种情况下，使用Cookie虽然可以达成目的，但是Cookie有些缺陷，比如只能存储4K左右的数据，不能存储对象等等。于是，在HTML5中新增了Web Storage API，解决了上述问题，让我们可以方便地在浏览器本地进行数据存储。

Web Storage API有两种：localStorage和sessionStorage，两者的区别在于：

• localStorage：在页面关闭后仍然可以存在。也就是说，在同一个浏览器中，即使关闭了标签页或者浏览器，数据仍然存在。而且，这些数据只有在用户手动清除浏览器缓存的情况下才会被删除。
• sessionStorage：仅在当前会话（当前页面或选项卡）下有效。关闭标签页或浏览器后，这些数据会被删除。

jQuery如何实现本地存储？

为了方便使用Web Storage API，jQuery提供了localStorage()和sessionStorage()方法。这两个方法的用法基本相同，所以我们仅介绍localStorage的用法。

1. 存储数据

// 存储一个键值对
localStorage.setItem("key", "value");

// 存储一个对象
localStorage.setItem("user", JSON.stringify({name: "Alice", age: 18}));

以上代码使用setItem()方法存储了一个键值对，或者一个对象（需要使用JSON.stringify()将对象转换为JSON字符串），其中key是键，value是值。如果键已经存在，setItem()方法将覆盖原来的值。

2. 获取数据

// 获取一个键值对
let value = localStorage.getItem("key");

// 获取一个对象
let user = JSON.parse(localStorage.getItem("user"));

以上代码使用getItem()方法获取了localStorage中存储的值，如果键不存在，将返回null。

3. 删除数据

// 删除一个键值对
localStorage.removeItem("key");

// 清空localStorage
localStorage.clear();

以上代码使用removeItem()方法删除一个键值对，clear()方法清空localStorage中的所有数据。

示例1：记住用户名

下面就是一个实际应用场景，当用户在登录页面勾选“记住用户名”复选框时，将用户名保存在localStorage中。当用户再次打开登录页面时，如果localStorage中存在用户名，则自动填充用户名。

<form action="" method="post">
  <p><label>用户名：<input type="text" name="username" id="username"></label></p>
  <p><label>密码：<input type="password" name="password"></label></p>
  <p><label><input type="checkbox" id="remember-name">记住用户名</label></p>
  <p><button type="submit">登录</button></p>
</form>

$(function() {
  // 当页面加载时，从localStorage中获取用户名
  let username = localStorage.getItem("username");
  if(username) {
    $("#username").val(username);
    $("#remember-name").prop("checked", true);
  }

  // 当用户勾选/取消“记住用户名”时，将用户名保存在/从localStorage中
  $("#remember-name").change(function() {
    if(this.checked) {
      localStorage.setItem("username", $("#username").val());
    }
    else {
      localStorage.removeItem("username");
    }
  });
});

以上代码使用jQuery中的.val()方法获取username输入框中的值，并使用.prop()方法来设置/获取复选框的状态（默认为未勾选）。当用户勾选/取消“记住用户名”时，通过change事件来处理，使用localStorage.setItem()或localStorage.removeItem()来保存/删除键值对。

示例2：本地搜索历史记录

下面是一个实际应用场景，实现搜索历史记录的本地存储。当用户在搜索框中输入关键字时，将关键字保存在localStorage中。当用户再次进入搜索页面时，自动显示历史搜索记录。

<input type="text" id="search">
<button id="btn-search">搜索</button>
<ul id="search-history"></ul>

$(function() {
  // 每次进入搜索页面时，显示历史搜索记录
  let searchHistory = JSON.parse(localStorage.getItem("searchHistory")) || [];
  for(let i = 0; i < searchHistory.length; i++) {
    $("<li>").text(searchHistory[i]).prependTo("#search-history");
  }

  // 当用户搜索时，将关键字保存在localStorage中，并显示在历史搜索记录中
  $("#btn-search").click(function() {
    let keyword = $("#search").val().trim();
    if(keyword) {
      if(searchHistory.indexOf(keyword) == -1) {
        searchHistory.push(keyword);
        localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
        $("<li>").text(keyword).prependTo("#search-history");
      }
      // 进行搜索操作
      console.log("搜索：" + keyword);
    }
  });

  // 清除历史搜索记录
  $("#btn-clear").click(function() {
    localStorage.removeItem("searchHistory");
    $("#search-history").empty();
  });
});

以上代码使用JSON.parse()和JSON.stringify()来将对象和字符串互相转换，使用indexOf()来检查数组中是否存在某个元素，使用.prependTo()和.empty()来操作DOM并清空历史记录。注意，以上示例没有实现对 localStorage 的容量以及条目数的限制，实际应用时需要根据需求进行限制。

总之，jQuery使得使用 localStorage 变得异常简单，相比纯JavaScript来讲，API的使用更加的简洁。