浅谈html5 localStorage 及简单应用

浅谈浏览器端本地存储

主要分享一下自己在这方面不是很利索的一番了解和实践。接受了组织委派的公司移动端网站的开发，项目代号：微站。给了3天的时间收集资料，于是一直专注于PC端前端开发的我踏上了双眼迷蒙的道路。

-一开始的时候选择了cookie存储，好吧，我承认这个太low了，新增和修改的时候我真的写的是眼泪都要掉下来了。

-然后又近一步的选择使用data-*来存储数据，数据的读取问题是解决了，但是目前的微站并不是单页面的应用，当需要跳转页面的时候就"要要，切克闹，这个还真做不了"。

-最后选择了html5本身就具备的localStorage。localStorage本身采用key-value的方式存储。而且存储便捷程度完爆上面两种，对比之下上面两种略显二逼（当然它们自然有它们的优势，请原谅我无知的吐槽0.0）。

在localStorage中的方法调用

// 新增条目, 推荐使用第一种方式
window.localStorage.setItem('flag', 1);
window.localStorage.flag = 1;
window.localStorage['flag'] = 1;

// 获取条目， 推荐使用第一种
window.localStorage.getItem('flag');
window.localStorage.flag;
window.localStorage['flag']

// 删除条目
window.localStorage.removeItem('flag');

// 删除所有条目
window.localStorage.clear();

// 获取当前localStorage条目的长度
window.localStorage.length;

// localStorage提供key()方法，以供调用key去获取相对于的value
// 比如我们设置了flag，那么运行下面那行代码，输出的应该是flag的值
window.localStorage.key(0);

// 遍历localStorage中的所有的key
for(var i in window.localStorage){
    console.log(+new Date(), window.localStorage.key(i));
}

-这里需要强调的一点：存储在localStorage中的所有value都是以字符串的形式保存，这意味着的就是：

// 这段代码输出的应该是"string"
window.localStorage.setItem('flag', 1);
console.log(typeof window.localStorage.getItem('flag'));

-当你存储是JSON格式时，你需要做的则是：

// 错误打开方式 会导致list等于 "[Object Object]"
var data = {'a': 1, 'b': 2};
window.localStorage.setItem('list', data);

// 正确打开方式
var data = {'a' : 1, 'b': 2};
window.localStorage.setItem('list', JSON.stringify(data));

// 从localStorage中读取JSON数据
var list = JSON.parse(window.localStorage.getItem('list'));

-友情提示：可以使用chrome的develop tools调试以上这些代码。推荐在console中执行dir(localStorage)，可以对localStorage的方法有更直观的认识。

duian

浅谈html5 localStorage 及简单应用

公告