1》共同点:
Cookie、SessionStorage、LocalStorage都在浏览器端储存数据,且为同源
2》区别
Web storage存储机制是对cookie存储机制的一个改善,本地数据库是HTML5中新增的一个功能,使用它可以在客户端本地建立一个数据库,原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了,既减轻了服务器的压力又加快了访问的速度
1.传输:
cookie数据始终在同源的http请求中携带,而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
2.存储大小:
cookie数据是不超过4K,而sessionStorage和localStorage虽然也有大小限制,但是可以达到5M或更大。
3.保存时间:
sessionStorage是临时保存,仅在当前浏览器窗口关闭之前有效;
localStorage是永久保存,除非主动删除数据,否则数据永远不会过期;
cookie分为内存cookie和硬盘cookie,内存cookie浏览器关闭就消失,硬盘cookie有一个过期时间,除非用户手工清除或者到了过期时间
sessionStorage:是将数据保存在session对象中。所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览网站所花费的时间,session对象可以用来保存在这段时间内所要求的保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备中,即使浏览器被关闭,该数据仍然存在,下次打开浏览器访问网站时仍然可以使用。
4.作用域不同
sessionStorage不在不同浏览器窗口中共享,即使是同一个页面;localStorage在所有同源窗口中都是共享的;cookie在所有同源窗口中都是共享的
sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage在同源同窗口中始终存在数据,就是说只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据仍然存在,同时“独立”打开的不同窗口即使是同一个页面sessionStorage对象也不同。
5.localStorage和sessionStorage使用时使用相同的API,而cookie需要自己封装
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本
localStorage.setItem("name","value");//以“name”为名称存储一个值“value”
localStorage.getItem("name");//获取名称为“name”的值
localStorage.removeItem("name");//删除名称为“name”的信息。
localStorage.clear();//清空localStorage中所有信息
枚举localStorage的方法:
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}