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

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

兼容性

作为前端同学最关心的问题，我们可以在caniuse网站中看到兼容性的情况。

情况还是很乐观的。

如何使用

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

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

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

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

如果你使用的是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