K先生个人博客

当前位置:首页 > 爱技术 > 正文

前端本地存储方案之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了,用法很简单,

作者K先生本文地址http://www.gold404.cn/

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表

    暂时还没有评论哦!