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 对象保存。

个人随笔，如有错误欢迎大神指正

参考

浅谈 HTML5 的 DOM Storage 机制

 使用 HTML5 开发离线应用

巴特西

web离线应用--dom storage

web离线应用--dom storage

参考

最新文章

热门文章