web离线应用--dom storage
web离线应用--dom storage
dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb
,而且在每次请求一个新页面cookie都会被送过去等等...所以html5提供了一种新标准接口,存储容量更大(5M
),以键值对存储,很方便使用。
dom storage分为local storage
和session storage
两种方式,这两种方式的操作完全一样,唯一的区别就是session storage
在页面关闭时不可继续使用,local storage
则可以。
dom storage接口如下:
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
deleter void removeItem(in DOMString key);
void clear();
};
length:返回当前存储在 Storage 对象中的键值对数量。
key(index):返回列表中第 n 个键的名字。Index 从 0 开始。
getItem(key):返回指定键对应的值。
setItem(key, value):存入一个键值对。
removeItem(key) :删除指定的键值对。
clear():删除 Storage 对象中的所有键值对。
通常,使用最多的方法是 getItem 和 setItem。
以localStorage为栗子,sessionStorage操作方式与localStorage一致
// 存储 以下两种方式均可
window.localStorage.setItem('key1', 'value');
window.localStorage.key1 = 'value';
// 取值
var key1 = window.localStorage.getItem('key1');
var key2 = window.localStorage.key1;
//删除
window.localStorage.removeItem('key1');
// 清除
window.localStorage.clear();
骚年就这样子了,前面写一堆只是为了后面那几行代码,简单吧。。赶紧按下F12试试吧
在chrome下操作的同学可以在resources
-->local/session storage
选项看到你的操作结果
注意:dom storage
存进去取出来的值都是字符串格式,如果不是你想要的格式你只能自行转换,你也可以使用JSON
进行格式化
JSON.parse() 函数会把 JSON 对象转换为原来的数据类型。
JSON.stringify() 函数会把要保存的对象转换成 JSON 对象保存。
个人随笔,如有错误欢迎大神指正