目录
现在前端做数据存储、跨页面传值,localStorage是一个很好的方式,以键值对的方式存储。
1.存值
存值共有3种方式,localStorage相当于window对象下面的一个属性,所以有[ ]和 . 调用,还具有自身的setItem方法。
// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";
2.取值
和存值相同,取值也是[ ]和 . 调用,还具有自身的getItem方法。
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;
3.修改
改变就相当于给对应的key重新赋值,就会把原来的值覆盖掉。
// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";
4.移除
移除某一个值,可以通过对象删除属性的关键字delete,也可以用自身的方法removeItem。
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name
5.获取所有的key
可以使用for循环直接拿到localstorage的key
// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
console.log(localStorage.key(i));
}
// 通过for in 循环获取
for(var key in localStorage){
console.log(key);
}
6.获取所有的值
localStorage.valueOf();取出所有的值
7.清除所有的值
localStorage.clear()
8.判断是否含有某个key
// 如果存在的话返回true,不存在返回false
localStorage.hasOwnProperty("name")
9.使用技巧
1.先判断浏览器是否支持localStorage,通过if(!window.localStorage) return;
2.单词太长,不方便书写,可以利用 var storage=window.localStorage;
3.字符串和原始类型需要通过JSON.stringfy转字符串,通过JSON.parse转成对象
4.通过封装方法实现来回转化
10.注意事项
1.localStorage特定于页面的协议,不是同一域名,不能访问。
2.有长度限制,5M左右,不同浏览器大小会有不同。
3.生命周期是永久的,但是数据实际是存在浏览器的文件夹下,可能卸载浏览器就会删除。
4.浏览器可以设置是否可以访问数据,如果设置不允许会访问失败。
5.兼容IE8以上浏览器
6.只能存储字符串类型,需要转成字符串存储。