浅谈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)));
	}
}