WebStorage储存
什么是WebStorage
HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。
这些数据可以是临时的(浏览器一关就自动删除),或者是长期存在的(无论多少天之后打开网站,仍然可以访问这些数据)。
WebStorage写法
// 两种写法
localStorage.name="xin";
localStorage.setItem("name","xietxinian");
WebStorage打印方式
// 打印方式
console.log(localStorage.name);
console.log(localStorage.getItem("name"));
WebStorage清除
localStorage.clear();//清除所有
localStorage.removeItem("name");//清除某一个
localStorage、sessionStorage与cookie的区别
数据请求方面:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
存储大小限制也不同:
cookie数据不能超过5k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
数据有效期不同:
sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;
localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;
cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
作用域不同:
sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;
localStorage 在所有同源窗口中都是共享的;
cookie也是在所有同源窗口中都是共享的。
其他:
Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
WebStorage分类
localStorage: 本地存储,用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的;
sessionStorage:会话存储,用于本地存储一个会话 (session)中的数据,这些数据当在关闭浏览器后数据也随之销毁。
通过input设置改变localStorage案例
<input type="text">
// 这个是初始设置localStorage.bg值
// localStorage.abc=10;
var input=document.querySelector("input");
input.addEventListener("input",inputHandler);
// 这个是localStorage.bg随着input输入的value而改变
function inputHandler(e){
localStorage.bg=input.value;
}
添加多个localStorage值案例
// 任何数据存储在cookie,storage中都必须使用字符串存储
var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){
e.preventDefault();
var fd=new FormData(form);
var obj={}
for(let value of fd){
obj[value[0]]=value[1];
}
var arr=JSON.parse(localStorage.shoppingList);
arr.push(obj);
localStorage.shoppingList=JSON.stringify(arr);
}
localStorage 和 sessionStorage都是window对象的属性
属性值可以直接在window内获取
localStorageAPI
localStorage 和 sessionStorage都是通过JSON存储对象方式
JSON.stringify(对象) 把对象转换成JSON字符串
JSON.parse(json串) 把json串转化为对象