前端本地存储方案之localStorage

最近发现了一个有意思的东西localStorage，这个localStorage相当于一个前端的数据库，感觉用起来还是比较爽的。先想象一下这个场景，我想开发一个本地自己用的记事本，用于平时消费记记账，写写心情什么的，如果我用原生Android开发，那么我可以选择比较方便的SQLite，但是遗憾的是我不会安卓原生开发，我只会h5 app的开发，但是开发这个记事本肯定是需要数据库的，而我只需要的是一个本地化的个人记事本，那么再去写后台、搭数据库就显得没必要了。

什么？用cookie做存储？cookie的存储大小只有4k，虽然4k已经能写好多文字了，但怎么感觉用cookie开发记事本有点怪异了，，，好在，我了解到了一个新东西localStorage，这到底是个啥呢？

localStorage：是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。

localStorage允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。

localStorage的用法

其实localStorage和cookie的用法差不多，

保存数据：

localStorage.setItem("key", "value");

读取数据：

localStorage.getItem("key");

删除数据：

localStorage.removeItem("key");
storage.clear();//清除所有数据

首先在使用 localStorage 的时候，我们需要判断浏览器是否支持 localStorage 这个属性：

if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
}

localStorage存入json的相关用法

一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。

我们将json数据转化为json字符串之后再存入localStorage：

var d=JSON.stringify(jsondata);
storage.setItem("data",d);

我们将存入的json字符串取出来，并转换成json对象：

var json=storage.getItem("data");
var jsonObj=JSON.parse(json);

看完这篇文章，应该就能掌握localStorage了，用法很简单，