web本地存储

　　

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以

document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，每一次发送请求都会携带上cookie，会造成带宽的浪费，给开发带来诸多不便，HTML5规范则提出解决方案。

　　

web存储的含义是将数据存储到用户的电脑上，这样可以缓解服务器的压力，并且提高体验。

1 特性

1、设置、读取方便。

2、容量较大，sessionStorage约5M、localStorage约20M。

3、只能存储字符串，可以将对象JSON.stringify() 编码后存储。

2 window.sessionStorage

1、生命周期为关闭当前页面窗口。

2、不能多窗口下数据可以共享 （同源策略，百度家的local阿里他们家是拿不到）。

补充：通过跳转可以

。

运用场景：

　

1、页面跳转的时候可以通过session实现数据共享。

　

2、在一些单页面（spa）的运用中，进行页面传值的时候比较有用。

3 window.localStorage

1、永久生效，除非手动删除或用代码删除。

2、可以

多窗口共享（同源策略）。

运用场景：一些不涉及到安全的一些数据（不要太过庞大）都可以存储到本地。

4 方法详解

setItem(key, value) 设置存储内容

window.localStorage/sessionStorage.setItem(key,value);

getItem(key) 读取存储内容

window.localStorage/sessionStorage.getItem(key,value);

removeItem(key) 删除键值为key的存储内容

window.localStorage/sessionStorage.removeItem(key,value);

clear() 清空所有存储内容

window.localStorage/sessionStorage.empty();

key(n)

以索引值来获取键名

window.localStorage/sessionStorage.key(n);

length 存储的数据的个数

window.localStorage/sessionStorage.length;

区别：

cookie数据 :

始终在同源的

http请求

中携带（即使不需要），即

cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次 http请求

都会携带

cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同。

sessionStorage

：

仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持。

localStorage

：

始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

相同点：都是存储数据，存储在

web端，并且都是同源。

不同点：

（

1）cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好，浪费带宽。

（

2）session和local直接存储在本地，请求不会携带，并且容量比cookie要大的多。

（

3）session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过期时间。

（

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

想要学习前端开发的同学，可以加群：

543627393 学习哦！