localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器也会一直存在。
sessionStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,会话级存储,也就是说如果关闭当前页面或者浏览器那么就会清除
cookie:客户端存储,参与服务器通信,存储大小为4k,可设置生命周期,在设置的生命周期内有效
写法:
localStorage.setItem("temp",arr) //存储
localStorage.getItem("temp") //读取
localStorage.removeItem("arr"); //删除
localStorage.clear(); //清空
注意:存入的数据只能以字符串形式存入
提供转JOSN数据方法:
obj = JSON.stringify(obj); //JSON对象转JSON字符串
obj=JSON.parse(localStorage.getItem("temp2")); //JSON字符串转JSON对象
-----------------------------------------------------------------------------
sessionStorage.setItem("temp", arr); // 存储
sessionStorage.getItem("temp"); //读取
跟localStorage写法一样
特点:
1.不同浏览器无法共享localStorage,
2.相同浏览器的不同页面间可以共享相同的 localStorage但是前提必须是在同一域名和端口下。如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
3.在谷歌无痕模式下,localStorage、cookie是读取不到的,但是你可以新增数据然后读取,但是关闭页面后再打开还是会清空。
实例:
window.onload = function () { //页面打开后
var username = document.getElementById("txtUserName"); //获取 用户名
var password = document.getElementById("txtPassword"); //获取密码
var chk = document.getElementById("chkRemember"); //获取 记住登录
if (localStorage.getItem("username") && localStorage.getItem("password")) { //页面localStorage.getItem 存在数据 就保存 并复选框为选中
username.value = localStorage.getItem("username");
password.value = localStorage.getItem("password");
chk.checked = true;
}
chk.onclick = function () { //点击复选框
if (chk.checked) { //选中时localStorage.setItem 保存数据
localStorage.setItem("username", username.value);
localStorage.setItem("password", password.value);
} else {
localStorage.removeItem("username"); //不选中时删除localStorage.removeItem数据
localStorage.removeItem("password");
}
}
}