Cookie, LocalStorage 与 SessionStorage

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cookie, LocalStorage 与 SessionStorage相关的知识,希望对你有一定的参考价值。

  1. Cookie, LocalStorage 与 SessionStorage相同点

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

  2. 三者的特点

  同属于html5中的Web Storage
特性CookielocalStoragesessionStorage
数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭浏览器后被清除
存放数据大小 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




以上是关于Cookie, LocalStorage 与 SessionStorage的主要内容,如果未能解决你的问题,请参考以下文章

sessionStorage localStorage 和 cookie 之间的区别

localStorage使用总结 JS 详解 Cookie LocalStorage 与 SessionStorage

Cookie, LocalStorage 与 SessionStorage

JWT LocalStorage 与 Cookie

Cookie, LocalStorage 与 SessionStorage说明

cookie,localStorage,sessionStorage的特点与区别。