Cookie, LocalStorage 与 SessionStorage

Posted 2020-08-16

1. Cookie, LocalStorage 与 SessionStorage相同点

   • 都是储存在用户本地的数据。
   • 意义在于避免数据在浏览器和服务器间不必要地来回传递。   

2. ---

   三者的特点

		同属于html5中的Web Storage
特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭浏览器后被清除
存放数据大小	4K/个文件*最多20个	>5MB/站点	>5MB/站点
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
数据的可访问性	不同浏览器、不同窗口中都是共享的	同一个浏览器、同站点不同窗口中可以共享	仅同一个页面窗口中才能共享
常用于	记住密码、		购物车缓存

 

• web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

webstorage的浏览器支持如下：

实践上可这样切换使用：

var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");    

 

• Cookie

　　Cookie分2种。当浏览器运行时，Cookie 可存储在 RAM 中发挥作用 （此种 Cookies 称作 Session Cookies），一旦用户从该网站或服务器退出，Cookie 可存储在用户本地的硬盘上 （此种 Cookies 称作 Persistent Cookies）。

　　当 Web 服务器创建了Cookies 后，只要在其有效期内，当用户访问同一个 Web 服务器时，浏览器首先要检查本地的Cookies，并将其原样发送给 Web 服务器。所以　　Cookie的内容应该少而精。

　　某些浏览器用户可能禁用cookie。

　　查看某个网站颁发的Cookie很简单。在浏览器地址栏输入JavaScript:alert (document. cookie)就可以了。

　　详细的cookie参见http://blog.csdn.net/fangaoxin/article/details/6952954/

 

• localStorage

　　localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

　　同一站点共用一份5M的localStorage，储存在浏览器的sqLite中，通过window.localStorage对象访问。

　　localStorage储存的是键值对（类似于字典）值必须以字符串格式来存入（数组可以直接存,对象要用json格式存，最后读出来都是字符串）。

　　创建、读取localStorage：

<script type="text/javascript">

var num=[1,2,3,4];
localStorage.numlist=num;//lastname字段必须唯一，同一站点页面根据相同的名字可覆盖你的值
document.write(localStorage.numlist);// ,输出 1,2,3,4 因为localStorage是以字符串来储存

</script>

localStorage教程参见：http://www.zhangxinxu.com/wordpress/?p=1952

•  SessionStorage

类似localStorage，键值对存储。

区别在于仅存在于同一个页面中，页面关闭再打开依然存在，但当浏览器窗口关闭就失效。

通过window.sessionStorage对象访问。

---

 

参考：

http://www.jb51.net/html5/144597.html

http://www.w3school.com.cn/html5/html_5_webstorage.asp