Web Storage 允许在浏览器保存用户数据，具体分为两种，一种是 localStorage，一种是 sessionStorage
对于客户端的存储方式，类似的还有早期乃至现在还广泛使用的 cookie，它们之间的区别如下：
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 与服务端的通信 | 在每次请求中都会携带 | 不与服务端通信 | 不与服务端通信 |
| 数据的生命周期 | 设置的失效时间前有效 | 永久有效，除非主动删除 | 在浏览器关闭前有效 |
| 数据的作用范围 | 设置的域名及其子域名 | 在所有同源窗口之间共享 | 不能在不同窗口之间共享 |
| 储存的数据大小 | 一般不超过 4KB | 一般在 5MB 左右 | 一般在 5MB 左右 |
Web Storage API 继承 window 对象，并提供两个新属性，window.localStorage 和 window.sessionStorage
它们都是一个对象，常见的属性和方法如下：
length：保存的数据条数setItem(key, value)：保存数据getItem(key)：获取指定数据removeItem(key)：删除指定数据clear()：删除所有数据key(index)：根据索引获取键名
if (window.localStorage) {
var storage = window.localStorage
storage.setItem('username', 'admin')
storage.setItem('password', '12345')
let username = storage.getItem('username')
let password = storage.getItem('password')
console.log(username) // admin
console.log(password) // 12345
console.log(storage.length) // 2
storage.removeItem('password')
console.log(storage.length) // 1
storage.clear()
}
最后顺便来补充一下 cookie 和 session 的相关知识
我们知道，HTTP 协议是无状态的，也就是说每次发出的请求都是独立的，这个时候就会造成很多的不便
比如，用户在一个请求中登陆之后，对于他发出的另外一个请求，服务器还是无法识别用户的身份
而 cookie 和 session 的出现都是为了记录用户的信息，从而在多次请求中识别用户的身份
cookie 的运作机制如下：
- 服务器在响应中通过
set-cookie头部要求浏览器设置 cookie - 浏览器在收到响应后，如果该浏览器支持使用 cookie，那么就会将 cookie 保存到文件
- 浏览器在以后每次发出请求时，都会在请求中通过
cookie头部带上 cookie 信息 - 服务器在收到请求后，根据 cookie 信息识别用户身份
session 的运作机制如下：
-
服务器创建一个唯一的标识，并将这个标识和对应的 session 信息保存下来，然后将这个标识发给浏览器
保存 session 信息的方式常见的有三种，一种是保存在内存中，一种是保存在文件中，一种是保存在数据库中
-
浏览器在收到这个标识后，在以后每次发出请求时，都会带上这个标识
带上标识的方式常见的有两种，一种是附加在 cookie 中，一种是附加在 URL 参数中
-
服务器在收到请求后，根据标识找到对应的 session 信息识别用户身份
cookie 数据存放在浏览器上，session 数据存放在服务器上，所以相对而言使用 session 更为安全
但是，过多的 session 数据保存在服务器上，会影响服务器的性能，所以需要权衡选择
【 阅读更多 HTML 系列文章，请看 HTML学习笔记 】