Web存储

[yaofly2012]

一、WebStorage

WebStorage一般指的是Storage，用于纯客户端存储key-value。

二、Storage

2.1 基础

1. WebStorage的接口。
   具体的实现有localStorage和sessionStorage。
2. 操作都是同步的；
3. key和value都必须是字符串。非字符串会自动toString。

localStorage.setItem('-yao-', { name: 1})
localStorage.getItem('-yao-') // "[object Object]"

如果想要保存对象，一般是先进行JSON.stringify处理。

4. 可以像访问对象属性那样操作数据；

localStorage['-yao-'] = 'abc'
localStorage['-yao-'] // 'abc'
// 删除数据
delete localStorage['-yao-'] 

但是最好使用setItem，getItem，removeItem操作数据。

5. 受同源策略影响，怎么跨域使用参考跨域总结

2.2 APIs

1. key-value对的操作方便多了。
2. length, clear, getItem, setItem, removeItem, key居然都是可枚举的

// { configurable: true, enumerable: true, get: ƒ length(){}, set: undefined }
Object.getOwnPropertyDescriptor(localStorage.__proto__, 'length')

3. 没有遍历的方法；
4. 没有清空的方法；
   估计太危险了，就没提供。

2.3 遍历Storage

本质上WebStorage更像个对象，没有直接提供遍历方法。

1. 利用key方法

for(var i = 0, len = localStorage.length; i < len; ++i) {
  var key = localStorage.key(i);
  console.log(key, localStorage[key])
}

2. 利用遍历对象的方法

Object.keys(localStorage).forEach(key => {
  console.log(key, localStorage[key])
})

2.5 Size限制

超出Size限制后调用setItem会抛QuotaExceededError异常。此时可以清理非必要的存储。
通过白名单的方式确定必要的存储，其他可以作为非必要存储。

var whiteList = {
    key: 1,
    key2: 1
}

try {
    localStorage.setItem('__test__', 1);
    localStorage.removeItem('__test__');
} catch(e) {
    if (e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
        Object.keys(localStorage).forEach(key => {
            if(!whiteList || !whiteList[key]) {
                localStorage.removeItem(key);
            }
        })
    } else {
        throw e;
    }
}

三、localStorage / sessionStorage

两者太像了，唯一的区别就是有效性了，所以放一起总结了。

1. 隐式模式下都不可以使用的，此时可以使用window.name进行hack。

3.2 扩展Storage

1. 支持存取对象
2. 增加有效期控制

npm store

3.3 vs Cookie

参考

1. MDN WebStorage
2. Calculating usage of localStorage space