本地存储
注意:
本地存储调用者必须统一,用临时存储存储的数据,只有临时存储才能找到
localStorage
永久存储(相对),其中的数据不随着浏览器的开关而改变
sessionStorage
临时存储(相对),当浏览器关闭/当前页面关闭时,数据消失,页面刷新时不会影响
两者区别
local 和 session的区别:
- local这里做永久存储,浏览器关闭与否并不影响它。多数使用在用户自动登录; 客户端保存数据方面
- session做临时存储,浏览器或页面关闭时,数据自动删除,不再存储。多用于安全性使用较高的地方。
例如: 登录后,本网站内 页面跳转无需再次登录。当退出整个网站,再次进入,仍需登录
判断是否支持
if (typeof(Storage) !=="undefined") {
alert("是的,支持本地存储!")
}else{
alert("抱歉,不支持web存储!")
}
保存数据
btn[0].onclick = function(){
//setItem(): 将数据以键值对的方式,存储
// 谁调用,存给谁
// sessionStorage.setItem("key",ipt.value);
localStorage.setItem("txt",ipt2.value);
}
获取数据
btn[1].onclick = function(){
//getItem(): 获取
//根据key键获取value值
console.log(localStorage.getItem("text"));
for (var i = 0 ; i < localStorage.length ; i++) {
console.log(localStorage.key(i))
}
// 多个数据时,提供的思路如下
// var b = JSON.parse(sessionStorage.getItem("text"));
//遍历 forin
//将in 后面 的属性 逐个取出 存到 in前面的变量中
//for(变量 in 对象){}
// for(var k in b){
// console.log(k);
// console.log(b[k]);
// }
}
删除数据
btn[2].onclick = function(){
//根据Key键,删除对应的键值对
localStorage.removeItem("text");
}