Web存储-localStorage和sessionStorage

Web存储：

将数据存储到用户的电脑上，缓解服务器压力，提高体验。

传统方式是document.cookie来进行存储，但是cookie存储大小只有4K左右，并且解析也相当的复杂，每一次发送请求都会携带上cookie，会造成带宽的浪费。

所以HTML5规范则提出解决方案。sessionStorage和localStorage

特性：

设置、读取方便容量较大，sessionStorage约5M，localStorage约20M只能存储字符串，可以将对象JSON.stringify()编码后存储

1、API详解

setItem(key,value)——设置存储内容getItem(key)——读取存储内容removwItem(key)——删除键值为key的存储内容clear()——清空所有内容key(n)——以索引值来获取键名length——存储的数据的个数web 存储分为sessionStorage和localStorage  web 存数据window.localStorage.setItem('LocalUsername','逆夏');window.sessionStorage.setItem('sessionUsername','逆夏');获取数据alert(window.localStorage.getItem('LocalUsername'));alert(window.sessionStorage.getItem('sessionUsername'));通过key(下标)获取键名alert(window.localStorage.key(0));alert(window.sessionStorage.key(0));删除数据window.localStorage.removeItem('LocalUsername');window.sessionStorage.removeItem('sessionUsername');整体清除window.localStorage.clear();window.sessionStorage.clear();数据的长度alert(window.localStorage.length);alert(window.sessionStorage.length);

---

window.localStorage

LocalStorage的数据是永久存储在电脑里面，除非手动删除或者用代码清除，关浏览器，关电脑。可以多窗口共享数据（同源策略）。运用场景：一些不涉及到安全的一些数据（不要太过庞大）都可以存储到本地

---

同源策略：同域名，同协议，同端口。

---

window.sessionStorage

sessionStorage的数据是临时数据，当这个页面被关闭的时候就自动清除，刷新是不会清除的。不能多窗口下数据共享（同源策略）但是页面跳转（如a链接）的时候可以通过session实现数据共享运用场景：在一些单页面（spa）的运用中，进行页面传值的时候比较有用

---

cookie、localStorage、sessionStorage的区别：

相同点：都是存储数据，存储在web端，并且都是同源策略下的。

不同点：

1、大小不同：

cookie只有4k,小，并且每一次请求都会带上cookie，体验不好，浪费带宽session和local直接储存在本地，请求不会携带，并且容量比cookie大很多

2、生命周期不同：
session是临时会话，当窗口被关闭的时候就清除掉。local永久存在。cookie有过期时间

3、cookie和local都可以支持多窗口共享。而session不支持多窗口共享，但是支持a链接跳转的新窗口

存储对象的转换

web存储只能存贮字符串，所以我们只能将对象转换成字符串然后再存储

JSON.stringify()——将json对象转成字符串JSON.parse()——将字符串转成json对象var obj = {  "name":"逆夏",  "age":24}obj = JSON.stringify(obj);console.log(typeof obj);//stringwindow.localStorage.setItem("哈哈",obj);var a = window.localStorage.getItem("哈哈");console.log(typeof a);//stringa = JSON.parse(a);console.log(typeof a);//object