浅谈localStorage本地存储

在年会的抽奖程序中用到了localStorage如今拿出来总结下，localStorage的相关用法。

在年会抽奖的程序中，须要把获奖名单存储下来，年会现场没有网络，能最简单实现数据存储的方式就是，将数据存到本地。在h5标准中正好有，localStorage支持。

兼容性

做为前端同窗最关心的问题，咱们能够在caniuse网站中看到兼容性的状况。

状况仍是很乐观的。

如何使用

localStorage.msg="hello";
console.log(localStorage.msg);

在页面中执行如山代码的时候，当你关闭页面的时候，再次打开的时候仍是能够读取到 localStorage.msg 的值
test页面

为了能更好的看到数据是能够读取到的咱们尝试下面的实例

if (localStorage.pagecount) {
    localStorage.pagecount = 
        Number(localStorage.pagecount) +1;
} else{
  localStorage.pagecount=1;
}
console.log(
        'Visits ' + 
        localStorage.pagecount + 
        ' time(s).'
);

demo页面

若是你使用的是chrome浏览器的话，在chrome调试台中，你能够看到localStorage存储的数据。

进阶

localStorage 能够做为一个微型的本地“数据库”来用了，那么怎么实现数据的增删改查呢？如何遍历呢？还有localStorage有哪些限制？咱们逐个来看看。（一下默认 localStorage = window.localStorage ）

1. 如何判断是否支持?

if (window.localStorage) {
    alert('This browser supports localStorage');
} else {
    alert('This browser does NOT support');
}

2. 有何限制？

localStorage 的存储格式都是字符串，任何其余类型都会转成字符串存储。

3. 如何存值（增）？

简单的方法直接赋值

localStorage.a = 1；//注意存储的值为'1'
localStorage['a'] = 1；

localStorage自己也有存值的方法setItem

localStorage.setItem('a','1');

4. 如何删除值（删）？

localStorage清除键值对的方法为removeItem，若是想一次清除因此值的话用

localStorage.removeItem('a');//清除a的值
localStorage.clear(); // 一无全部了全部数据都会干掉

5. 如何读取值（查）？

直接获取和getItem方法

var a1 = localStorage['a'];//获取a的值
var a2 = localStorage.a;//获取a的值
var a3 = localStorage.getItem('a');//获取a的值

localStorage还提供了key方法用于遍历。

function showStorage(){
    for(var i=0;i<localStorage.length;i++){
        //key(i)得到相应的键，再用getItem()方法得到对应的值
        console.log(localStorage.key(i),
                localStorage.getItem(
                        localStorage.key(i)));
    }
}