了解 localStorage

发表于

简介

localStorage，顾名思义，就是本地存储，即把数据存储在本地当中。

生命周期

localStorage 是直接存放在本地。不同于 cookies、session，不会由于标签页、浏览器窗口被关闭而清除。要清除 localStorage 数据，只能通过它自身的方法，或者是清除浏览器缓存（但在 IE8 中不起作用）

操作

检验是否支持

if( window.localStorage ) {
    console.log("support");
} else {
    console.log("Not support");
}

从上面的代码中可以看出，localStorage 是一个全局变量。我们可以直接通过 window.localStorage 对它进行访问。

BUT~ 在高级浏览器中，不管服务器中，还是本地的 file 协议，我们也能够访问到该对象。但在 IE8 中，我们只能通过建立服务器才能够访问到。

设置（存放）

三种方式：

  1. 通过 “.” 来进行设置

    localStorage.a = 123;

  2. 通过 “[]” 来赋值

    localStorage['b'] = 'test';

  3. 通过 localStorage 的 setItem 方法

    localStorage.setItem('c', { name: 'Wade' });
    // [object object]

注意，当数据存放在 localStorage 时，会被自动处理为字符串类型。因此，在上面的栗子中，属性 a 的键值为 ‘123’，而 c 的键值为 [object object] (对象被处理后，只得到它的类型 class)

因此，在处理 c 这种情况时，应该要使用 JSON.stringify() 来把对象转化为 json 字符串再存入 localStorage。

另外，在 iPhone/iPad 中，有时设置 setItem() 时会出现 QUOTA_EXCEEDED_ERR 错误，这时一般在 setItem 之前，先 removeItem() 就 ok 了。

获取

和设置相同，获取 localStorage 中的数据，也有三种方式：

  1. localStorage.a

  2. localStorage[‘b’]

  3. 通过 getItem() 方法
    localStorage.getItem('c');

注意，由于在 localStorage 中的数据都被处理为字符串，因此在取出来时，要注意转换类型。而对于 json 字符串的数据，应该用 JSON.parse() 进行处理，才能得到原来存入的对象。

localStorage.setItem('d', JSON.stringify({ name: 'Name' }) );
var data = JSON.parse( localStorage.getItem('d') );
// { name: 'Name' }

删除

localStorage 提供了两个方法来清除对象里的键值：

  • removeItem(key)

    localStorage.removeItem('c');
    console.log(localStorage.c);    // undefined

  • clear()

    localStorage.clear();
    console.log(localStorage);      // 所有添加的键值都清空了，剩下本身自带的 length 属性

获取键名

localStorage 提供了 key() 方法，可以让我们在不知道键名的情况下获取键值。

localStorage.key(\)

for(var i=0, len=localStorage.length; i<len; i++){
    var _key = localStorage.key(i);
    var _value = localStorage.getItem(_key);
    console.log(_key + ' : ' + _value);
}

事件

localStorage 提供了 storage 事件。
事件对象 event 包括：

  • oldValue
  • newValue
  • key
  • storageArea

etc…

不过，经测试，在 IE8 无法触发；在 Chrome 中，改变了 localStorage 的某个内容时，该网页本身不会触发，只有同源的网页才会触发= =

// storage 事件
if (window.addEventListener) {
    window.addEventListener('storage', handle_storage, false);
} else if (window.attachEvent) {
    window.attachEvent('onstorage', handle_storage);
}
function handle_storage(e){
    if (!e) {
        e = window.event;
    }
    console.log(e);
}
function count(){
    if (!localStorage.getItem('count')) {
        localStorage.setItem('count', 0);
    }
    var count = parseInt(localStorage.getItem('count')) + 1;
    localStorage.setItem('count', count);
}