cookie:是存储在本地的数据,有时候也用cookies,通常经过加密,应用最经典的就是判断注册用户是否已经登录过该网站。
localStorage:仅在客户端保存(即浏览器),不参与和服务器的通信;没有时间限制,即使浏览器关闭,数据依然存在。
sessionStorage:当用户的浏览器窗口关闭时,数据会被清除。
创建和访问localStorage:
//1 设置数据
let forgetData = {phone:vm.phone};
localStorage.setItem("forgetData", JSON.Stringfy(forgetData));
//forgetData是存储在localStorage里边的本地数据; JSON.Stringfy(forgetData) 是将数据转化为字符串格式。
//获取数据
vm.forgetData = JSON.parse(localStorage.getItem("forgetData")); //将字符串转化为JSON格式
//2 设置
localStorage.name = "zhao";
//获取
localStorage.name; //zhao
共同点:都是保存在浏览器端,且同源的。
区别:
1.储存大小
cookie数据大小不能超过4k, sessionStorage和localStorage虽然也有大小限制,但是要比coookie大的多,可以达到5M或者更大。
2.有效时间
localStorage存储持久数据,浏览器关闭后数据不丢失 除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效,即便窗口或浏览器关闭
3.数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端,即cookie在浏览器和服务器之间来回传递;
sessionStorage和localStorage不会自动把数据发给服务器,只在本地保存.