1、Cookie
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。支持所有现代浏览器。
var time=new Date("2019 10-01 12:00:00");
document.cookie="user=654321;expires=Tue Oct 01 2019 12:00:00 GMT+0800;path=/";
document.cookie="ID=abctkj123ihg789sfbd;expires=Tue Oct 01 2019 12:00:00 GMT+0800;path=/";
var json={};
var data=document.cookie.split(";")[0].split("=");
json[data[0]]=data[1];
console.log(json);
cookie一般存储用户名密码相关信息,或者过期日期。
2、localStorage 和 sessionStorage
localStorage:硬盘存储 ( 本地缓存 类似cookie 一直都在)
/*
* 本地缓存
*setItem() 设置缓存
* getItem()
* length 有多少条
* key 通过索引获取对应条数的键
* clear() 清除缓存
* removeItem 清除指定
* */
localStorage.setItem("user","12345");
localStorage.setItem("ID","12345");
var data=localStorage.getItem("user");
console.log(data);
console.log(localStorage.length);
var name=localStorage.key(0);
console.log(name);
//localStorage.clear()
localStorage.removeItem("user")
localStorage可以用来统计页面访问次数。
sessionStorage:浏览器端缓存(浏览器关闭之后没有了)
sessionStorage.setItem("user", "12345");
sessionStorage.setItem("ID", "12345");
var data = sessionStorage.getItem("user");
console.log(data);
console.log(sessionStorage.length);
var name = sessionStorage.key(0);
console.log(name);
//sessionStorage.clear()
sessionStorage.removeItem("user");
sessionStorage可以用来统计当前页面元素的点击次数。
它们之间的区别以及共同点:
共同点:都是保存在浏览器端,并且是同源的(URL的协议、端口、主机名是相同的,只要有一个不同就属于不同源)
区别:
1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而session
Storage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以
限制cookie只属于某个路径下。
2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合
保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以
达到5M或更大
3、数据有效期不同,sessionStorage仅仅在当前浏览器窗口关闭之前有效;localStorage始终有效,窗口或者
浏览器关闭之后也一直保存,因此作用持久数据;cookie,只在设置cookie过期时间之前有效,即使窗口关闭或者浏
览器关闭。
4、作用域不同:sessionStorage在不同的浏览器窗口中不共享,即使是同一个页面,localStorage在所有的同源窗
口中是共享的,cookie也是在所有同源的窗口中共享的。