HTML学习笔记(七) Web Storage

Web Storage 允许在浏览器保存用户数据，具体分为两种，一种是 localStorage，一种是 sessionStorage

对于客户端的存储方式，类似的还有早期乃至现在还广泛使用的 cookie，它们之间的区别如下：

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 数据保存在服务器上，会影响服务器的性能，所以需要权衡选择