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\_\_')))
上图结果截图:
手机扫一扫
移动阅读更方便
你可能感兴趣的文章