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

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

简介

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

在此之前，用户通常使用 cookie 来存储数据（在客户端），但由于每次发送 HTTP 请求时，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”按钮，然后刷新页面、从新的标签页打开相同页面、或者从新窗口打开页面，甚至重启浏览器后打开新的页面，刚刚输入的用户名和密码都会自动填充，如下图所示：

sessionStorage

完。

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

原文：https://www.cnblogs.com/itwhite/p/12271888.html