详解Vue中localstorage和sessionstorage的使⽤
1. 项⽬使⽤中暴露出来的⼏个问题
⼤家到处直接使⽤localstorage['aaa']='这是⼀段⽰例字符串'这些原⽣语法实现，这样耦合度太⾼了，假如有⼀天我们需要换实现⽅式，或者对存储⼤⼩做⼀些控制，那么需要修改的代码就会很多
项⽬很⼤，那么⼤家起的key的名字难免会重复，⽽且这样也会造成全局污染
因为localstorage的使⽤不规范，所以造成了存储空间的浪费和不够⽤
2. 解决办法
封装storage的使⽤⽅法，统⼀处理
规范storage的key值的命名规则
规范storage的使⽤规范
2.1. 封装统⼀的⽅法
封装成⽅法可以降低耦合度，可以⽅便切换实现⽅式，可以控制存储量⼤⼩
改变实现可以通过配置不同的参数来实现
编辑如图所⽰的项⽬结构
代码实现
/*
* storage.js
*/
/*
* @Author: ⽯国庆
* @Desc: 本地数据存储⽅法封装
* @Date: 2017.11.14
* @Ref:
*  github/WQTeam/web-storage-cache
*  /en-US/docs/Web/API/Storage/LocalStorage
* @Explain：为了不new对象，只能多写⼏遍
* @Example:
*
* 1、LocalStorage的使⽤
* import storage from '@/utils/storage.js'
* storage.setItem('shiguoqing0',[1,2,3,4,5,6])
* storage.setItem('shiguoqing1',{userId:'dfdf',token:11232323})
* storage.setItem('shiguoqing2','dfdfdf')
* console.Item('shiguoqing0'))
* console.Item('shiguoqing1'))
* console.Item('shiguoqing2'))
* veItem('shiguoqing2')
*
*
* 2、SessionStorage的使⽤
* storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
*
* */
// TODO：其他⽅法的实现
// TODO：超时时间的设置
/
*
* ⽅法实现
* */
import local from './storage/localstorage.js'
import session from './storage/session.js'
import cookies from './storage/cookies.js'
import json from './storage/json.js'
/*
* 函数体
* */
let storage= {
config:{
type:'local',// local,session,cookies,json
expires:new Date().getTime() + 100 * 24 * 60 * 60 * 1000
},
getStorage(options){
let config={}
if(options){
config=Object.assign({},fig,options)
}else{
fig
}
pe)
},
createStorage(name){
switch(name){
case 'local':return local;break
case 'session':return session;break
case 'cookies':return cookies;break
js获取json的key和valuecase 'json':return json;break
}
},
getItem(key,options){
let Storage(options)
Item(key)
},
setItem(key, value,options){
let Storage(options)
store.setItem(key,value)
},
removeItem(key,options){
let Storage(options)
},
getAll(){},
clear(options){
let Storage(options)
store.clear()
},
key(n){},
lenght(){},
has(key){},
forEach(cb){},
deleteAllExpires(){},
// 获取最⼤存储空间：只有LocalStorage和SessionStorage可以使⽤这个⽅法
getMaxSpace(options){
let Storage(options)
},
// 获取使⽤了的空间：只有LocalStorage和SessionStorage可以使⽤这个⽅法
getUsedSpace(options){
let Storage(options)
}
}
export default storage
/
/ segmentfault/a/1190000002458488
// 5、遍历localStorage存储的key
//  .length 数据总量，例：localStorage.length
//  .key(index) 获取key，例：var key=localStorage.key(index);
// 备注：localStorage存数的数据是不能跨浏览器共⽤的，⼀个浏览器只能读取各⾃浏览器的数据，储存空间5M。// 超时设置
// function(st, key, value, expires) {
//  if (st == 'l') {
//  st = window.localStorage;
//  expires = expires || 60;
//  } else {
//  st = window.sessionStorage;
//  expires = expires || 5;
//  }
//  if (typeof value != 'undefined') {
//  try {
//    return st.setItem(key, JSON.stringify({
//    data: value,
//    expires: new Date().getTime() + expires * 1000 * 60
//    }));
//  } catch (e) {}
//  } else {
//  var result = JSON.Item(key) || '{}');
/
/  if (result && new Date().getTime() < pires) {
//    return result.data;
//  } else {
//    st.removeItem(key);
//    return null;
//  }
//  }
// }
/*
* localstorage.js
* localstorage的实现
*/
// 这个有点奇怪,⽂件名称叫local.js不能按照js⽂件解析export default {
getItem(key){
let item = Item(key)
// 这点要判断是字符串还是对象
let result = /^[{\[].*[}\]]$/g.test(item)
if (result) {
return JSON.parse(item)
} else {
return item
}
},
setItem(key, value){
// 这点要判断是字符串还是对象
if (typeof value == "string") {
localStorage.setItem(key, value)
} else {
let item = JSON.stringify(value)
localStorage.setItem(key, item)
}
},
removeItem(key){
},
getAll(){},
clear(){
localStorage.clear()
},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){},
// 获取localstorage最⼤存储容量
getMaxSpace(){
if (!window.localStorage) {
console.log('当前浏览器不⽀持localStorage!')
}
var test = '0123456789'
var add = function (num) {
num += num
if (num.length == 10240) {
test = num
return
}
add(num)
}
add(test)
var sum = test
var show = setInterval(function () {
sum += test
try {
veItem('test')
window.localStorage.setItem('test', sum)
console.log(sum.length / 1024 + 'KB')
} catch (e) {
console.log(sum.length / 1024 + 'KB超出最⼤限制')    clearInterval(show)
}
}, 0.1)
},
// 获取使⽤了的localstorage的空间
getUsedSpace(){
if (!window.localStorage) {
console.log('浏览器不⽀持localStorage')
}
var size = 0
for (item in window.localStorage) {
if (window.localStorage.hasOwnProperty(item)) {
size += Item(item).length
}
}
console.log('当前localStorage使⽤容量为' + (size / 1024).toFixed(2) + 'KB') }
}
/*
* session.js
* sessionstorage的实现
*/
export default {
getItem(key){
let item = Item(key)
// 这点要判断是字符串还是对象
let result = /^[{\[].*[}\]]$/g.test(item)
if (result) {
return JSON.parse(item)
} else {
return item
}
},
setItem(key, value){
/
/ 这点要判断是字符串还是对象
if (typeof value == "string") {
sessionStorage.setItem(key, value)
} else {
let item = JSON.stringify(value)
sessionStorage.setItem(key, item)
}
},
removeItem(key){
},
getAll(){},
clear(){
sessionStorage.clear()
},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){},
// 获取localstorage最⼤存储容量
getMaxSpace(){
if (!window.sessionStorage) {
console.log('当前浏览器不⽀持sessionStorage!')
}
var test = '0123456789'
var add = function (num) {
num += num
if (num.length == 10240) {
test = num
return
}
add(num)
}
add(test)
var sum = test
var show = setInterval(function () {
sum += test
try {
veItem('test')
window.sessionStorage.setItem('test', sum)
console.log(sum.length / 1024 + 'KB')
} catch (e) {
console.log(sum.length / 1024 + 'KB超出最⼤限制')
clearInterval(show)
}
}, 0.1)
},
// 获取使⽤了的localstorage的空间
getUsedSpace(){
if (!window.sessionStorage) {
console.log('浏览器不⽀持sessionStorage')
}
var size = 0
for (item in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(item)) {
size += Item(item).length
}
}
console.log('当前sessionStorage使⽤容量为' + (size / 1024).toFixed(2) + 'KB')
}
}
/*
* cookies.js
* cooikes的实现，这辈⼦估计没有时间实现了
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
/*
* json.js
* json的实现，这辈⼦估计也没有时间实现了
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
2.2. 规范命名空间的使⽤
为了防⽌key值污染，我们可以合理使⽤命名空间
我们可以定义命名空间，但是不能把很多数据存储在同⼀对象⾥⾯，这样后⾯的操作量会太⼤
⽐如全局的在global下⾯
⽐如各功能系统的加上系统词缀
⼀个系统的命名空间规范应该提前设计好，否则真正开发起来会有很多⼈不按照规则使⽤
全局使⽤的东西要在README.md⽂档中体现出来
⽰例
* localStorage['SGQ.global.userAuthor']：登录的⽤户信息都在这⾥，菜单，组织，集团
* localStorage['SGQ.global.systemName']：登录的系统名称
* localStorage['SGQ.vuex.state']:vuex中的state的存储地址，这⾥⾯有所有的的东西
* localStorage['SGQ.wms.warehouse']:wms需要的仓库信息
+ localStorage['SGQ.wms.warehouse'].permissionId
+ localStorage['SGQ.wms.warehouse'].dataResource
* localStorage['']:tms需要的⽹点的信息
+ localStorage[''].permissionId
+ localStorage[''].orgName
2.3. storage使⽤规范
2.3.1. 问题产⽣的原因
这个问题的产⽣是因为我们要做权限登录，然后登录的时候⼀直报存储空间不够的问题，查了原因发现是后端把所有的超管的⼏千条数据都返回来了，以⾄于不够⽤，后来修改了后端接⼝返回的数据内容解决了这个问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。