English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1. Quelques problèmes révélés pendant l'utilisation du projet
Les gens utilisent directement everywhere la syntaxe native localStorage['aaa']='This is a sample string' ces implémentations, ce qui rend la complexité trop élevée, si un jour nous devons changer de mode d'implémentation ou faire quelques contrôles sur la taille du stockage, alors beaucoup de code devra être modifié
Pour un grand projet, les noms de clé choisis par tout le monde risquent de se chevaucher, et cela peut également causer une pollution globale
En raison de l'utilisation non standardisée de localStorage, cela a causé un gaspillage d'espace de stockage et un manque de place
2. Solution
Encapsuler les méthodes d'utilisation de storage, traiter uniformément
Normaliser les règles de nommage des valeurs de clé de storage
Normaliser l'utilisation de storage
2.1. Encapsulation des méthodes unifiées
L'encapsulation en méthode peut réduire la complexité, permettre un basculement facile entre les modes d'implémentation et contrôler la taille de la quantité de stockage
Le changement d'implémentation peut être réalisé en configurant différents paramètres
Modifier la structure du projet comme indiqué dans l'image
Réalisation du code
/*
* storage.js
*/
/*
* @Author: 石国庆
* @Desc: Encapsulation de la méthode de stockage des données locales
* @Date: 2017.11.14
* @Ref:
* https://github.com/WQTeam/web-storage-cache
* https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
* @Explain:Pour ne pas créer d'objet, il faut écrire plusieurs fois de plus
* @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.log(storage.getItem('shiguoqing0'))
* console.log(storage.getItem('shiguoqing1))
* console.log(storage.getItem('shiguoqing2))
* storage.removeItem('shiguoqing2)
*
*
* 2et l'utilisation de SessionStorage
* storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
*
* */
// TODO: implémentation d'autres méthodes
// TODO: réglage du temps d'expiration
/*
* implémentation des méthodes
* */
import local from '.'/storage/localstorage.js'
import session from '.'/storage/session.js'
import cookies from '.'/storage/cookies.js'
import json from '.'/storage/json.js'
/*
* corps de la fonction
* */
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(){},
// Obtenir l'espace de stockage maximal : cette méthode ne peut être utilisée que pour LocalStorage et SessionStorage
getMaxSpace(options){
let store=this.getStorage(options)
store.getMaxSpace()
},
// Obtenir l'espace utilisé : cette méthode ne peut être utilisée que par LocalStorage et SessionStorage
getUsedSpace(options){
let store=this.getStorage(options)
store.getUsedSpace()
}
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、parcourir les clés stockées dans localStorage
// .length quantité totale de données, par exemple : localStorage.length
// .key(index) pour obtenir la clé, par exemple : var key=localStorage.key(index);
// Remarque : les données stockées dans localStorage ne peuvent pas être utilisées de manière partagée entre les navigateurs, chaque navigateur ne peut lire que les données de son propre navigateur, espace de stockage5M.
// Réglage du délai d'expiration
// 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
// });
// }
// } 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
* Implémentation de localstorage
*/
// Ça a l'air un peu étrange, le nom de fichier local.js ne peut pas être interprété comme un fichier js
export default {
getItem(key){
let item = localStorage.getItem(key)
// Il faut déterminer s'il s'agit d'une chaîne ou d'un objet
let result = /^[{\[].*[}\]]$/g.test(item)
if (result) {
return JSON.parse(item)
} else {
return item
}
},
setItem(key, value){
// Il faut déterminer s'il s'agit d'une chaîne ou d'un objet
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(){},
// Obtenir la capacité maximale de stockage de localStorage
getMaxSpace(){
if (!window.localStorage) {
console.log('Le navigateur ne prend pas en charge 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 dépasse la limite maximale')
clearInterval(show)
}
}, 0.1)
},
// Obtenir l'espace de stockage utilisé par localStorage
getUsedSpace(){
if (!window.localStorage) {
console.log('Le navigateur ne prend pas en charge localStorage')
}
var size = 0
for (item in window.localStorage) {
if (window.localStorage.hasOwnProperty(item)) {
size +
}
}
console.log('La capacité d'utilisation actuelle de localStorage est de ' + / 1024).toFixed(2) + 'KB')
}
}
/*
* session.js
* Implémentation de sessionStorage
*/
export default {
getItem(key){
let item = sessionStorage.getItem(key)
// Il faut déterminer s'il s'agit d'une chaîne ou d'un objet
let result = /^[{\[].*[}\]]$/g.test(item)
if (result) {
return JSON.parse(item)
} else {
return item
}
},
setItem(key, value){
// Il faut déterminer s'il s'agit d'une chaîne ou d'un objet
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(){},
// Obtenir la capacité maximale de stockage de localStorage
getMaxSpace(){
if (!window.sessionStorage) {
console.log('Le navigateur actuel ne prend pas en charge 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 dépasse la limite maximale')
clearInterval(show)
}
}, 0.1)
},
// Obtenir l'espace de stockage utilisé par localStorage
getUsedSpace(){
if (!window.sessionStorage) {
console.log('Le navigateur ne prend pas en charge sessionStorage')
}
var size = 0
for (item in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(item)) {
size +
}
}
console.log('La capacité d'utilisation actuelle de sessionStorage est de ' + / 1024).toFixed(2) + 'KB')
}
}
/*
* cookies.js
* La mise en œuvre de cooikes, il est probable que je n'ai pas le temps de l'implémenter dans cette vie
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
/*
* json.js
* La mise en œuvre de json, il est probable que je n'ai pas le temps de l'implémenter dans cette vie
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}
2.2. Utilisation régulière de l'espace de nom
Pour éviter la pollution des valeurs de clé, nous pouvons utiliser l'espace de nom de manière raisonnable
Nous pouvons définir l'espace de nom, mais nous ne devons pas stocker beaucoup de données dans un même objet, car la quantité de travail à effectuer après cela serait trop importante
Par exemple, les choses globales doivent être sous global
Par exemple, ajouter un préfixe de système à chaque système fonctionnel
Les normes de nommage des espaces de noms d'un système doivent être bien conçues à l'avance, sinon, une fois le développement véritablement commencé, beaucoup de gens ne suivront pas les règles
Les choses utilisées globalement doivent être reflétées dans le document README.md
Exemple
* localStorage['SGQ.global.userAuthor'] : toutes les informations d'utilisateur en login ici, menu, organisation, groupe * localStorage['SGQ.global.systemName'] : le nom du système de login * localStorage['SGQ.vuex.state']: l'adresse de stockage de state dans vuex, où se trouvent toutes les choses * localStorage['SGQ.wms.warehouse']: les informations de entrepôt nécessaires pour wms + localStorage['SGQ.wms.warehouse'].permissionId + localStorage['SGQ.wms.warehouse'].dataResource * localStorage['SGQ.tms.org']: les informations de site nécessaires pour tms + localStorage['SGQ.tms.org'].permissionId + localStorage['SGQ.tms.org'].orgName
2.3. Norme d'utilisation de storage
2.3.1. La cause du problème
La cause de ce problème est que nous devons faire le login de permission, puis pendant le login, il est constamment signalé que l'espace de stockage est insuffisant, après avoir vérifié la cause, il s'avère que le backend a retourné toutes les données de plusieurs milliers de super-administrateurs, ce qui n'est pas suffisant, après avoir modifié le contenu des données retournées par l'interface backend, ce problème a été résolu.
Mais cette affaire nous a apporté plusieurs points de réflexion ?
La quantité de stockage localstorage et sessionstorage est généralement la même dans différents navigateurs5M
Le stockage localstorage et sessionstorage suit le domaine
Le stockage localstorage sous boss.hivescm.com est5M
b2Le stockage localstorage sous b.hivescm.com est également5M
Même si ce problème est résolu cette fois, nous devrions établir un plan pour utiliser pleinement, sous un même domaine, la localstorage et la sessionstorage10Espace M
2.3.2. Solution de stockage storage
Les choses utilisées globalement, partagées et stockées de manière permanente sont stockées dans le localstorage
Les choses qui ne nécessitent pas de stockage permanent doivent être supprimées à temps après utilisation
Si la quantité de données est trop grande, n' stockez pas localement, mais obtenez dynamiquement
Il est possible d'utiliser Indexeddb avec une plus grande capacité de stockage, mais il y a des problèmes de compatibilité
Il est possible de limiter le nombre de caractères à stocker dans le stockage
Utiliser pleinement et raisonnablement sessionStorage et localStorage H5Caractéristiques
Par exemple : les données de liste stockées dans Vuex sont également stockées dans localStorage
Par exemple : certains données de validation du formulaire utilisent sessionStorage
3. Autres
3.1. Extension
On peut en déduire que le traitement des événements, les événements inutilisés doivent être nettoyés à temps lors de la sortie du composant Vue
Par exemple : this.bus.$on('aa') doit utiliser this.bus.$off('aa') pour désactiver l'événement
3.2. Obtenir la longueur du caractère
var len = 0
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //En mode large
len += 2 //S'il s'agit de caractères en mode large, ils occupent deux octets Si un champ est text dans MySQL, si le codage est utf-8, alors un caractère chinois occupe3octets, gbk en deux octets
else
len += 1 //Un caractère en mode demi-caractère occupe un octet
}
return len
Voici le contenu complet que j'ai rassemblé sur l'utilisation de localStorage et sessionStorage dans Vue, merci de votre soutien au tutoriel d'alarme.
Déclaration : Le contenu de cet article est extrait du réseau, propriété du propriétaire original, contribué par les utilisateurs d'Internet et téléversé spontanément. Le site Web ne détient pas de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de copyright, veuillez envoyer un e-mail à : notice#oldtoolbag.com (Lorsque vous envoyez un e-mail, veuillez remplacer # par @ pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, le site supprimera immédiatement le contenu suspect de violation de droit d'auteur.)