1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多
2. 增强了setItem方法,增强版的可以设置值为undefined null array object string number类型的值
3. 增加了(has getAll forEach)api
源码如下
/**
* Created by Sorrow.X on 2018/3/30.
* 本地存储实现, 封装localStorage和sessionStorage
*/ ;(function() {
const api = {
setItem(key, val) {
if (tip(arguments, 'setItem', 2)) { return }
this.storage.setItem(key, serialize(val))
return val
}, getItem(key, defaultVal) {
if (tip(arguments, 'getItem', 1)) { return }
// 如果没有该key, 则自动设置到缓存中去, 默认值为null
if (!this.has(key)) {
return this.setItem(key, defaultVal || null)
}
let ret = deserialize(this.storage.getItem(key))
// 如果有该key,但是值为undefined或者null,则使用默认值且设置到缓存去
if (defaultVal && (ret === undefined || ret === null)) {
ret = this.setItem(key, defaultVal)
}
return ret
}, removeItem(key) {
if (tip(arguments, 'removeItem', 1)) { return }
this.storage.removeItem(key)
}, clear() {
this.storage.clear()
}, key(index) {
if (tip(arguments, 'key', 1)) { return }
this.storage.key(index)
}, has(key) {
if (tip(arguments, 'has', 1)) { return }
// 使用原生getItem方法,如果没有该key会返回字符串"null"
return this.storage.getItem(key) !== null
}, getAll() {
let map = Object.create(null)
this.forEach((key, val) => {
map[key] = val
})
return map
}, forEach(callback, ctx) {
for (let i = 0; i < this.storage.length; i++) {
let key = this.storage.key(i)
callback && callback.call(ctx, key, this.getItem(key), i)
}
}
} let local = Object.assign({
storage: window.localStorage
}, api) let session = Object.assign({
storage: window.sessionStorage
}, api) function serialize(val) {
return JSON.stringify(val)
} function deserialize(val) {
try {
return JSON.parse(val)
} catch (e) {
return val === "undefined" ? undefined : val
}
} function tip(args, operation, actualNum) {
if (args.length < actualNum) {
console.error(
`Failed to execute '${operation}' on 'store': ${actualNum} arguments required, but only ${args.length} present.`
)
return true;
} else {
return false;
}
} if (
typeof module !== 'undefined' &&
typeof exports === 'object'
) {
module.exports = { local, session }
} else {
window.local = local
window.session = session
}
})();
使用姿势(和原生对比)：
// 原生
localStorage.setItem('num', 1)
localStorage.setItem('str', 'str')
localStorage.setItem('arr', [1, 2, 3])
localStorage.setItem('obj', {a: 1, b: 2, c: 3})
localStorage.setItem('undefined', undefined)
localStorage.setItem('null', null) console.log(localStorage.getItem('test'), Object.prototype.toString.call(localStorage.getItem('test')))
console.log(localStorage.getItem('num'), Object.prototype.toString.call(localStorage.getItem('num')))
console.log(localStorage.getItem('str'), Object.prototype.toString.call(localStorage.getItem('str')))
console.log(localStorage.getItem('arr'), Object.prototype.toString.call(localStorage.getItem('arr')))
console.log(localStorage.getItem('obj'), Object.prototype.toString.call(localStorage.getItem('obj')))
console.log(localStorage.getItem('undefined'), Object.prototype.toString.call(localStorage.getItem('undefined')))
console.log(localStorage.getItem('null'), Object.prototype.toString.call(localStorage.getItem('null'))) // 增强版
local.setItem('__num__', 1)
local.setItem('__str__', 'str')
local.setItem('__arr__', [1, 2, 3])
local.setItem('__obj__', {a: 1, b: 2, c: 3})
local.setItem('__undefined__', undefined)
local.setItem('__null__', null) console.log(local.getItem('__test__'), Object.prototype.toString.call(local.getItem('__test__')))
console.log(local.getItem('__num__'), Object.prototype.toString.call(local.getItem('__num__')))
console.log(local.getItem('__str__'), Object.prototype.toString.call(local.getItem('__str__')))
console.log(local.getItem('__arr__'), Object.prototype.toString.call(local.getItem('__arr__')))
console.log(local.getItem('__obj__'), Object.prototype.toString.call(local.getItem('__obj__')))
console.log(local.getItem('__undefined__'), Object.prototype.toString.call(local.getItem('__undefined__')))
console.log(local.getItem('__null__'), Object.prototype.toString.call(local.getItem('__null__')))
上图结果截图：