English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1. 项目使用中暴露出来的几个问题
大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现，这样耦合度太高了，假如有一天我们需要换实现方式，或者对存储大小做一些控制，那么需要修改的代码就会很多
项目很大，那么大家起的key的名字难免会重复，而且这样也会造成全局污染
因为localstorage的使用不规范，所以造成了存储空间的浪费和不够用
2. 解决办法
封装storage的使用方法，统一处理
规范storage的key值的命名规则
规范storage的使用规范
2.1. 封装统一的方法
封装成方法可以降低耦合度，可以方便切换实现方式，可以控制存储量大小
改变实现可以通过配置不同的参数来实现
编辑如图所示的项目结构
代码实现
/*
* storage.js
*/
/*
* @Author: 石国庆
* @Desc: 本地数据存储方法封装
* @Date: 2017.11.14
* @Ref:
* https://github.com/WQTeam/web-storage-cache
* https://developer.mozilla.org/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
* Speicher.wertSetzen('shiguoqing111232323})
* Speicher.wertSetzen('shiguoqing2','dfdfdf')
* console.log(Speicher.wertAbrufen('shiguoqing0'))
* console.log(Speicher.wertAbrufen('shiguoqing1))
* console.log(Speicher.wertAbrufen('shiguoqing2))
* Speicher.löschen('shiguoqing2)
*
*
* 2、SessionStorage的使用
* storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
*
* */
// TODO: Implementierung anderer Methoden
// TODO: Einrichtung der Ablaufzeit
/*
* Methodenumsetzung
* */
import local from '.'/storage/localstorage.js'
import session from '.'/storage/session.js'
import cookies from '.'/storage/cookies.js'
import json from '.'/storage/json.js'
/*
* Funktionsskript
* */
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({},this.config,options)
}else{
config=this.config
}
return this.createStorage(config.type)
},
createStorage(name){
switch(name){
case 'local':return local;break
case 'session':return session;break
case 'cookies':return cookies;break
case 'json':return json;break
}
},
getItem(key,options){
let store=this.getStorage(options)
return store.getItem(key)
},
setItem(key, value,options){
let store=this.getStorage(options)
store.setItem(key,value)
},
removeItem(key,options){
let store=this.getStorage(options)
store.removeItem(key)
},
getAll(){},
clear(options){
let store=this.getStorage(options)
store.clear()
},
key(n){},
lenght(){},
has(key){},
forEach(cb){},
deleteAllExpires(){},
// Erhalten Sie den größten Speicherplatz: Dieser Methodenaufruf ist nur mit LocalStorage und SessionStorage möglich
getMaxSpace(options){
let store=this.getStorage(options)
store.getMaxSpace()
},
// Erfassen Sie den verwendeten Speicherplatz: Dieser Methoden kann nur LocalStorage und SessionStorage verwendet werden
getUsedSpace(options){
let store=this.getStorage(options)
store.getUsedSpace()
}
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、durchsuchen Sie die im localStorage gespeicherten Keys
// .length Datenmenge, z.B.: localStorage.length
// .key(index) Key abrufen, z.B.: var key=localStorage.key(index);
// Anmerkung: Die in localStorage gespeicherten Daten können nicht zwischen Browsern gemeinsam genutzt werden, jeder Browser kann nur die Daten seines eigenen Browsers lesen, Speicherplatz5M.
// Zeitüberschreitungseinstellungen
// 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.parse(st.getItem(key) || '{}');
// if (result && new Date().getTime() < result.expires) {
// return result.data;
// } else {
// st.removeItem(key);
// return null;
// }
// }
// }
/*
* localstorage.js
* Die Implementierung von localstorage
*/
// Das ist etwas seltsam, der Dateiname local.js kann nicht wie eine js-Datei interpretiert werden
export default {
getItem(key){
let item = localStorage.getItem(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){
localStorage.removeItem(key)
},
getAll(){},
clear(){
localStorage.clear()
},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){},
// 获取localstorage最大存储容量
getMaxSpace(){
if (!window.localStorage) {
console.log('当前浏览器不支持localStorage!')
}
var test = '0'123456789'''
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 {
window.localStorage.removeItem('test')
window.localStorage.setItem('test', sum)
console.log(sum.length / 1024 + 'KB')
}
console.log(sum.length / 1024 + 'KB übersteigt die maximale Begrenzung')
clearInterval(show)
}
}, 0.1)
},
// Erhalten Sie den Speicherplatz, der verwendet wurde
getUsedSpace(){
if (!window.localStorage) {
console.log('浏览器不支持localStorage')
}
var size = 0
for (item in window.localStorage) {
if (window.localStorage.hasOwnProperty(item)) {
size += window.localStorage.getItem(item).length
}
}
console.log('当前localStorage使用容量为' + / 1024).toFixed(2) + 'KB')
}
}
/*
* session.js
* sessionstorage的实现
*/
export default {
getItem(key){
let item = sessionStorage.getItem(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){
sessionStorage.removeItem(key)
},
getAll(){},
clear(){
sessionStorage.clear()
},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){},
// 获取localstorage最大存储容量
getMaxSpace(){
if (!window.sessionStorage) {
console.log('当前浏览器不支持sessionStorage!')
}
var test = '0'123456789'''
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 {
window.sessionStorage.removeItem('test')
window.sessionStorage.setItem('test', sum)
console.log(sum.length / 1024 + 'KB')
}
console.log(sum.length / 1024 + 'KB übersteigt die maximale Begrenzung')
clearInterval(show)
}
}, 0.1)
},
// Erhalten Sie den Speicherplatz, der verwendet wurde
getUsedSpace(){
if (!window.sessionStorage) {
console.log('Der Browser unterstützt sessionStorage nicht')
}
var size = 0
for (item in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(item)) {
size +
}
}
console.log('Der aktuelle Verwendungsort der sessionStorage beträgt' + / 1024).toFixed(2) + 'KB')
}
}
/*
* cookies.js
* Die Implementierung von cooikes, es wird wahrscheinlich nie Zeit dafür geben
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
/*
* json.js
* Die Implementierung von json, es wird wahrscheinlich nie Zeit dafür geben
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
2.2. Verwenden Sie Namensräume nach Vorschrift
Um Key-Wert-Kontamination zu vermeiden, können wir die Verwendung von Namensräumen rationalisieren
Wir können Namensräume definieren, aber wir dürfen nicht viele Daten in einem einzigen Objekt speichern, da die Operationen thereafter zu groß werden
For example, the global ones are under global
For example, add system prefix to each functional system
The naming convention of a system's namespace should be designed in advance, otherwise, many people will not follow the rules during actual development
Items used globally should be reflected in the README.md document
Example
* localStorage['SGQ.global.userAuthor']: The login user information is all here, including menu, organization, and group * localStorage['SGQ.global.systemName']: The name of the system logged in * localStorage['SGQ.vuex.state']: Storage address of the state in vuex, which contains all the items * localStorage['SGQ.wms.warehouse']: Information of the warehouse required by wms + localStorage['SGQ.wms.warehouse'].permissionId + localStorage['SGQ.wms.warehouse'].dataResource * localStorage['SGQ.tms.org']: Information of the nodes required by tms + localStorage['SGQ.tms.org'].permissionId + localStorage['SGQ.tms.org'].orgName
2.3. storage usage specifications
2.3.1. The cause of the problem
The reason for this problem is that we need to do permission login, and during the login, we have been reporting that there is not enough storage space. After investigating the cause, it was found that the backend returned all the data of thousands of super administrators, which was insufficient. Later, the problem was solved by modifying the data content returned by the backend interface.
But this incident has brought us some reflections?
The storage capacity of localStorage and sessionStorage is basically the same across different browsers5M
The storage of localStorage and sessionStorage follows the domain name
LocalStorage storage under boss.hivescm.com is5M
b2LocalStorage storage under b.hivescm.com is also5M
Even though this problem has been solved, we should establish a plan to make full use of the common storage of localStorage and sessionStorage under the same domain name10M space
2.3.2. storage usage plan
Items used globally, shared items, and items stored permanently are stored in localStorage
Items that do not require permanent storage should be cleared in time after use
如果数据量过大就不要存储在本地了，变为动态获取
可以使用存储量更大的Indexeddb，不过有兼容性问题
可以在实现方案中对要存储到storage中的东西做字数限制
充分合理利用sessionStorage和localStorage的H5特性
例如：列表数据存储在vuex中其实也会存到localStorage
例如：表单验证的一些数据都用sessionStorage
3. 其他
3.1. 扩展
由此可以类推到事件的处理，没用的事件要及时在退出vue组件的时候清理掉
例如：this.bus.$on('aa')要用this.bus.$off('aa')卸载事件
3.2. 字符长度获取
var len = 0
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
长度 += 2 //如果是全角，占用两个字节。如果MySQL中某个字段是text，如果设置为utf编码为utf-8，那么一个中文占用3个字节，GBK是两个字节
else
长度 += 1 //半角占用一个字节
}
返回长度
以上就是小编整理的关于Vue中localStorage和sessionStorage的用法的全部内容，感谢你对呐喊教程的支持。
声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立刻删除涉嫌侵权内容。）