JS 本地存储 localStorage 操作总结

现在前端做数据存储，跨页面传值，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

// 通过自身的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，hasOwnProperty方法

localStorage.hasOwnProperty("name")
// 如果存在的话返回true，不存在返回false
复制代码

9.注意事项

1.localStorage特定于页面的协议，不是同一域名，不能访问。 2.有长度限制，5M左右，不同浏览器大小会有不同。 3.生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。 4.浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。 5.兼容IE8以上浏览器 6.只能存储字符串类型，需要转成字符串存储。

10.使用技巧

1.先判断浏览器是否支持localStorage，通过if(!window.localStorage) return; 2.单词太长，不方便书写，可以利用 var storage=window.localStorage; 3.字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象 4.通过封装方法实现来回转化

PS. 获取localStorage最大存储大小的方法

(function() {
if(!window.localStorage) {
console.log('当前浏览器不支持localStorage!')
}
var test = '0123456789';
var add = function(num) {
num += num;
if(num.length == 10240) {
test = num;
return;
}
add(num);
}
add(test);
var sum = test;
var show = setInterval(function(){
sum += test;
try {
window.localStorage.removeItem('test');
window.localStorage.setItem('test', sum);
console.log(sum.length / 1024 + 'KB');
} catch(e) {
alert(sum.length / 1024 + 'KB超出最大限制');
clearInterval(show);
}
}, 0.1)
})()