JavaScript快速入门笔记（15）：Web storage 之 localStorage 和 sessionStorage

本系列随笔是本人的学习笔记，初学阶段难免会有理解不当之处，错误之处恳请指正。转载请注明出处：https://www.cnblogs.com/itwhite/p/12271888.html。

简介

Web Storage 是由 HTML5 引入的，它允许用户在客户端（浏览器端）存储数据（这一点看起来与 cookie 类似，但是它解决了 cookie 的一些局限性问题）。

在此之前，用户通常使用 cookie 来存储数据（在客户端），但由于每次发送 HTTP 请求时，cookie 都会随请求一起发送至服务端，为了不影响速度，这就要求 cookie 必须足够小（正如其字面意思“小甜饼”一样），cookie 大小不能不超过 4KB。

Web Storage 正是为了解决此类问题，它允许存储最多 5MB 的数据，并且不会发送至服务端，这对某些场景特别有用（比如：只有客户端会用到的数据）。

Web Storage 提供的接口包括：localStorage 和 sessionStorage ，它们都可以用来存储客户端数据，并且它们都是 window 对象的属性，因此可以直接使用它们的名字。它们区别在于存储数据的有效期和作用域不同，下面会分别详细描述。

localStorage

localStorage 是一个 Storage 对象，我们可以像访问普通的 JavaScript 对象一样访问它。

通过 localStorage  来存储的数据有效期是永久性的（无论你刷新页面、重启浏览器、还是重启计算机，它都仍然存在，除非你显式地删除它），它的作用域限定是“文档源”级别的（也就是只要协议、域名和端口相同，就都可以访问） ，代码示例：

<form>
    Name:     <input type="input" name="username" /><br />
    Password: <input type="password" name="password" /><br />
    <button type="submit">Login</button>
</form>
<script>
    var form = document.forms[0];
    form.onsubmit = function(e) {   // 当用户点击 Login 操作时，存储用户名和密码
        e.preventDefault();
        window.localStorage.username = form.elements[0].value;
        window.localStorage.password = form.elements[1].value;
        alert("Welcome " + form.elements[0].value + "!");
    };
    window.onload = function() {    // 当页面加载时，初始化输入框：自动填充上一次 Login 使用的 username 和 password
        form.elements[0].value = window.localStorage.username || "";
        form.elements[1].value = window.localStorage.password || "";
    };
</script>

从浏览器中打开上述页面，输入用户名和密码之后，点击“Login”按钮，然后刷新页面、或者从新的标签页打开页面、或者从新窗口打开页面，甚至重启浏览器后打开页面，刚刚输入的用户名和密码都会自动填充，如下图所示：

通过 API 来访问 localStorage 对象

上述示例中，是直接通过设置和读取 localStorage 对象的属性来访问存储数据，localStorage 是 Storage 对象，Storage 类型中封装了一系列函数（例如：getItem()、setItem()、removeItem()等）也可用于访问存储数据，示例：

<form>
    Name:     <input type="input" name="username" /><br />
    Password: <input type="password" name="password" /><br />
    <button type="submit" name="login" onclick="this.form.btnClicked=this">Login</button>
    <button type="submit" name="reset" onclick="this.form.btnClicked=this">Reset</button>
</form>
<script>
    var form = document.forms[0];
    form.onsubmit = function(e) {   
        e.preventDefault();
        if (form.btnClicked.name === "login") { // 当用户点击 Login 操作时，存储用户名和密码
            if (form.elements[0].value && form.elements[1].value) {
                localStorage.setItem("username", form.elements[0].value);
                localStorage.setItem("password", form.elements[1].value);
                alert("Welcome " + localStorage.getItem("username") + "!");
            }
            else {
                alert("Please input username and password!");
            }
        }
        else {                                  // 当用户点击 Reset 操作时，删除用户名和密码
            localStorage.removeItem("username");
            localStorage.removeItem("password");
            form.elements[0].value = "";
            form.elements[1].value = "";
        }
    };
    window.onload = function() { // 当页面加载时，自动填充上一次 Login 使用的 username 和 password
        form.elements[0].value = localStorage.getItem("username") || "";
        form.elements[1].value = localStorage.getItem("password") || "";
    };
</script>

关于 Storage 对象更多方法请参考：https://developer.mozilla.org/en-US/docs/Web/API/Storage。

存储事件

从上面的示例中可以看到，localStorage 可以用于同一个站点的多个页面进行数据共享，但是多个页面必须主动刷新页面才能拿到最新的数据，实际上 localStorage 还支持存储事件（当 localStorage 中存储数据发生改变时通知其它窗口）。

假设浏览器中有两个标签页面打开了同一个站点的两个页面，其中一个页面要是修改了 localStorage 存储的数据，另一个页面中只要监听了 storage 事件（通过 addEventListener()添加），就会收到通知，示例：

<form>
    Name:     <input type="input" name="username" /><br />
    Password: <input type="password" name="password" /><br />
    <button type="submit" name="login" onclick="this.form.btnClicked=this">Login</button>
    <button type="submit" name="reset" onclick="this.form.btnClicked=this">Reset</button>
</form>
<script>
    var form = document.forms[0];
    form.onsubmit = function(e) {   
        e.preventDefault();
        if (form.btnClicked.name === "login") { // 当用户点击 Login 操作时，存储用户名和密码
            if (form.elements[0].value && form.elements[1].value) {
                localStorage.setItem("username", form.elements[0].value);
                localStorage.setItem("password", form.elements[1].value);
                alert("Welcome " + localStorage.getItem("username") + "!");
            }
            else {
                alert("Please input username and password!");
            }
        }
        else {                                  // 当用户点击 Reset 操作时，删除用户名和密码
            localStorage.removeItem("username");
            localStorage.removeItem("password");
            form.elements[0].value = "";
            form.elements[1].value = "";
        }
    };
    window.onload = function() { // 当页面加载时，自动填充上一次 Login 使用的 username 和 password
        form.elements[0].value = localStorage.getItem("username") || "";
        form.elements[1].value = localStorage.getItem("password") || "";
    };
    window.addEventListener("storage", function(e){ // 监听 storage 事件
        console.log("Storage changed:", e);
        if (e.key === "username") {
            form.elements[0].value = e.newValue;
        }
        if (e.key === "password") {
            form.elements[1].value = e.newValue;
        }
    }, false);
</script>

这样，从多个窗口中打开页面时，当用户点击“Login”或“Reset”时，窗口中数据会同步更新。

需要说明的是：上述示例中，监听 storage 事件的回调函数参数是 StorageEvent 对象，它包含几个有用的属性：

• key：被修改或删除项的名字（例如：username），如果是通过 clear() 方法删除所有项，则其值为 null；
• newValue：修改后的新值，若是删除了该项，则其值为 null；
• oldValue：修改之前的值，若是新加的项，则其值为 null 。

关于 StorageEvent 事件对象更多的属性请参考：https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent。

sessionStorage

与 localStorage 一样，sessionStorage 也是一个 Storage 对象，因此，它与 localStorage 所提供的方法一致。

不同的是，sessionStorage 的作用域被限定在窗口中，同一个站点的页面在不同的标签页中打开，它们拥有各自独立的 sessionStorage 数据，不能共享也互不影响。

当标窗口或签页被关闭了 ，那么它所有的 sessionStorage 数据也就被删除了（注意：浏览器提供的打开最近关闭的页面可以恢复这些数据，此处不展开讨论）。

完。