H5的网络存储方式

前言：

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=2*24*60*60;

document.cookie=${key}=${value};max-age=${twoDay}