cookie sessionStorage localStorage

2/10/2017来源:心得技巧人气:3567

HTML5中提供了两种web存储方式:sessionStorage和lacalStorage;它们有以下几个共同特性:

设置读取方便(通过键值对); 容量较大,sessionStorage大约有5M,localStorage大约有20M; 如果要存储json数据,可以使用JSON.stringify()将对象转为字符串后保存;

sessionStorage

1.关闭浏览器窗口的时候,数据也被清除; 2.在同一个窗口下数据是可以共享的

localStorage

1.永久生效,除非手动清除; 2.可以多窗口共享

使用方法

两种存储方式,只是前缀不同,调用的方法是一致的。 1.setItem(key,value)–设置存储内容 eg: sessionStorage.setItem(‘test’,’content’) localStorage.setItem(‘test’,’content’) 2.getItem(key)读取存储内容 3.removeItem(key)删除键值为key的存储内容 4.cleaer()清空所有存储内容 5.key(n)以索引值来获取存储内容

关于cookie

1.cookie的缺点 (1)http请求头会带着 (2)带下4k (3)主Domain污染

2.主要区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

sessionStorage/localStorage/cookie比较:

差异性:

相同点:都是存储数据,存储在web端,并且都是同源

不同点:

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

2.session和local直接存储在本地,请求不会携带,并且容量比cookie要大的 3.session 是临时会话,当窗口被关闭的时候就清除掉 ,而 local永久存在,cookie有过期时间 4.cookie 和local都可以支持多窗口共享,而session不支持多窗口共享 但是都支持a链接跳转的新窗口

参考:http://www.cnblogs.com/hynb/p/6037021.html