Js 操作浏览器本地存储对象：HTML5 localstorage

最新推荐文章于 2022-05-25 16:25:38 发布

??yy

最新推荐文章于 2022-05-25 16:25:38 发布

阅读量489

点赞数

文章标签： json

原文链接：https://my.oschina.net/websec/blog/747482

版权

Localstorage原生是只存储字符串的内容，如果想直接存储JSON或者是Array时是不可行。但是我们通过一些技巧来存储这些内容；通常一般性的代码如下：

//json对象
var testObject = { "one": 1,"two": 2, "three": 3 };

// 存储对象到localstorage中
localStorage.setItem('testObject', JSON.stringify(testObject));

//从localstorage中获取数据
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

如果每次这样操作，会很烦，因为你需要不断的重复转换成字符串，解析字符串。为了解决这个问题，我们可以通过扩展prototype原型

var Storage=window.localStorage
Storage.__proto__.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.__proto__.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);//JSON.parse 不能处理`""`所以需要判断是否为空
}

参考资料

Web Storage (Second Edition) http://www.w3.org/TR/webstorage/

jStorage http://www.jstorage.info/

转载于:https://my.oschina.net/websec/blog/747482