如何在localstorage中存入一个对象

作者 likaiqiang 日期 2017-04-08
如何在localstorage中存入一个对象

什么是localstorage

Window.localStorage参见MDN的解释

localstorage可以干什么

可以利用它来存储本地数据,并且可以跨页面存储,它有两个重要的方法getItem与setItem,顾名思义,是用来取数据与存数据的。

localstorage的用法

setItem(key,value)

接受两个参数,key、value。这里说说value的数据类型,实际上不管value是什么数据类型,存入localstorage后都会变成string类型,也就是说,数据被存入localstorage时会自动调用他们各自的toString()方法。

var a = 123
a.toString()//"123"

var b = true
b.toString()//"true"

var arr = [1,2,3]
arr.toString()//"1,2,3"

var obj = {x:1,y:2}
obj.toString()//"[object Object]"

如果我们将一个对象直接存入localstorage,存入的数据实际上是”[object Object]”,当然用getItem()取出来的数据也是这个,那怎么在localstorage中正常的存入一个对象呢?

我们可以利用localstorage中存入的数据只能是字符串这个特性,在一个对象存入localstorage前将其序列化,取出来的时候再将其还原成一个对象。

var obj = {x:1,y:2}
localStorage.setItem('a',JSON.stringify(obj))
localStorage.getItem('a')//"{"x":1,"y":2}"
JSON.parse(localStorage.getItem('a'))//Object {x: 1, y: 2}

这样就可以在localstorage中存入一个对象了。