在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法:
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。在关闭窗口或标签页之后,数据会被删除。
方法如下:
string sessionStorage.key(int index) :返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
string sessionStorage.getItem(string key) :返回键名(key)对应的值(value)。若没有返回null。
void sessionStorage.setItem(string key, string value) :该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。
void sessionStorage.removeItem(string key) :将指定的键名(key)从 sessionStorage 对象中移除。
void sessionStorage.clear() :清除 sessionStorage 对象所有的项。
可以看到sessionStorage存储的数据只能是字符串,对于常用的对象和数组是存储不了的,因此我们可以通过JSON对象提供的parse和stringify将其他数据类型
转化成字符串,再存储到storage中就可以了。
代码如下:
存入数据:
this.queryParams={name:'lisi',id:'222'};
sessionStorage.setItem('queryParam',JSON.stringify(this.queryParams))
读取数据
this.queryParams = JSON.parse(sessionStorage.getItem('queryParam'));
数组的操作同样是用上述方法。
题外话:
localStorage的用法和sessionStorage是一样的,只不过localStorage的存储是永久性的,需要手动删除。