HTML学习笔记(七) Web Storage

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(ket)：删除指定数据
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学习笔记】

HTML学习笔记(七) Web Storage

猜你喜欢