使用 localStorage 的实践

使用 localStorage 的实践

function isLocalStorageUsable() { const localStorageTestKey = ‘__localStorage_support_test’; const localStorageTestValue = ‘test’; let isSupport = false; try { localStorage.setItem(localStorageTestKey, localStorageTestValue); if (localStorage.getItem(localStorageTestKey) === localStorageTestValue) { isSupport = true; } localStorage.removeItem(localStorageTestKey); return isSupport; } catch(e) { return isSupport; } }
读写操作虽然可以用来验证当前浏览器是否支持 localStorage 特性，但是并非支持 localStorage 的浏览器一定可以进行写操作，前面已经提到「浏览器给 localStorage 分配的存储空间是有限的」，当存储的内容已经到达上限，则无法再进行写操作。
try { localStorage.setItem(localStorageTestKey, localStorageTestValue); if (localStorage.getItem(localStorageTestKey) === localStorageTestValue) { isSupport = true; } localStorage.removeItem(localStorageTestKey); return isSupport; } catch(e) { if (e.name === ‘QuotaExceededError’ || e.name === ‘NS_ERROR_DOM_QUOTA_REACHED’) { console.warn(‘localStorage 存储已达上限！’) } else { console.warn(‘当前浏览器不支持 localStorage！’); } return isSupport; }复制代码
在调用 localStorage 相关方法时，都要确保当前浏览器支持 localStorage 特性，这里可以利用值缓存来避免多次调用该方法造成的性能损耗：
// 类的实例方法ready() { if (this.isSupport === null) { this.isSupport = isLocalStorageUsable(); } if (this.isSupport) { return Promise.resolve(); } return Promise.reject();}
通过定义上述的 ready 方法，使得嗅探方法具备「惰性执行」的特性。
键值对
当将对象直接作为键值对传入 localStorage 时，会隐式调用 toString 方法：
// 最终存储的键值为 key：[object Object] value: [object Object] localStorage.setItem({}, {});复制代码
如果不注意键名的类型，可能会出现因键名重复而造成数据丢失的问题。
当 localStorage 的 key 为对象时，应该给予适当的警告提示，一定程度上避免低级错误导致的 Bug：
function normalizeKey(key) { if (typeof key !== ‘string’) { console.warn(${key} used as a key, but it is not a string.); key =