前言：

document.cookie存储，内存只有4k左右,操作繁琐，给开发者带来不便 为了满足要求，h5规范提出了Web Storage

localStorage、sessionStorage和cookie 浏览器将数据存储在本地有三种方式：localStorage、sessionStorage和cookie。

---

特点

cookie:

1.设置的cookie过期时间，一值有效。 2.存储位置，服务器和预览器

localStorage:

1.存储数据长久，预览器关闭后数据不丢失，除非主动删除数据。 2.存储位置预览器

sessionStorage:

1.临时会话，预览器关闭，就自动删除。 2.存储位置，预览器

使用场景：

localStorage 对象存储的数据没有时间限制，用于长久保存整个网站的数据。

sessionstorage常用于敏感账号一次性登陆，如关闭当前页面再次打开页面就要重新登陆

cookie是自动随该域下的请求带在request header的cookie字段里，而无需额外的JS操作，在做通用的登录认证系统有着优势

Storage接口的方法和属性

setItem(key,value) 存储方式 getItem(key) 获取存储值 romoveItem(key) 指定键名，从存储中删除 clear() 清除当下所有的Sotrage内容 key(n) 返回第n个，key的名称 length 返回Sotrage对象item的数目

实例：

sessionStorage例子：

sessionStorage.setItem("小王","180岁") //存储到sessionStorage sessionStorage.clear() //清除了sessionStorage所有的内容

localStorage例子：

localStorage.setItem("小明","性别女") //存储到localStorage localStorage.clear() //清除了localStorage所有的内容

cookie例子:

存储方式 document.cookie = "小红=性别男"; 保质期 twoDay=22460*60; document.cookie=${key}=${value};max-age=${twoDay}