Cette fois, je vais vous montrer comment utiliser le stockage local et le stockage sessiondans Vue Quelles sont les précautions pour l'utilisation du stockage local et du stockage de session dans Vue. Voici les cas réels, un. Levez-vous et jetez un œil.
1. Plusieurs problèmes exposés lors de l'utilisation du projet
Tout le monde utilise directement localstorage['aaa']='This is an examplestring' et ces implémentations de syntaxe natives. Ce couplage est trop élevé Si un jour nous devons changer la méthode d'implémentation, ou ajuster le stockage. size Si vous effectuez un certain contrôle, il y aura beaucoup de code qui devra être modifié
Si le projet est de très grande envergure, les noms des clés seront inévitablement répétés, et cela provoquera également une pollution mondiale
Parce que l'utilisation du stockage local n'est pas standardisée, elle entraîne du gaspillage et un espace de stockage insuffisant
2.Solution
Comment utiliser le stockage encapsulé et le gérer uniformément
Standardiser les règles de dénomination des valeurs des clés de stockage
Standardiser l'utilisation du stockage
2.1. Méthode d'encapsulation unifiée
L'encapsulation de la méthode peut réduire le degré de couplage, faciliter le changement de méthode de mise en œuvre et contrôler la taille du stockage
La modification de l'implémentation peut être réalisée en configurant différents paramètres
Modifiez la structure du projet comme indiqué sur l'image
Implémentation du code
/* * 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]) * 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') * * * 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({},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(){}, // 获取最大存储空间:只有LocalStorage和SessionStorage可以使用这个方法 getMaxSpace(options){ let store=this.getStorage(options) store.getMaxSpace() }, // 获取使用了的空间:只有LocalStorage和SessionStorage可以使用这个方法 getUsedSpace(options){ let store=this.getStorage(options) store.getUsedSpace() } } export default storage // https://segmentfault.com/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.parse(st.getItem(key) || '{}'); // if (result && new Date().getTime() < result.expires) { // return result.data; // } else { // st.removeItem(key); // return null; // } // } // }
/* * localstorage.js * localstorage的实现 */ // 这个有点奇怪,文件名称叫local.js不能按照js文件解析 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 = '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 { window.localStorage.removeItem('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 += window.localStorage.getItem(item).length } } console.log('当前localStorage使用容量为' + (size / 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 = '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 { window.sessionStorage.removeItem('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 += window.sessionStorage.getItem(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. Standardiser l'utilisation de espace de noms
Afin d'éviter la pollution des valeurs clés, nous pouvons raisonnablement utiliser l'espace de noms
Nous pouvons définir un espace de noms, mais nous ne pouvons pas stocker beaucoup de données dans le même objet, donc le nombre d'opérations ultérieures sera trop important
Par exemple, le global est sous global
Par exemple, ajoutez l'affixe système
à chaque système fonctionnel La spécification de l'espace de noms d'un système doit être conçue à l'avance, sinon de nombreuses personnes ne suivront pas les règles lors de son développement réel
Les éléments utilisés globalement doivent être reflétés dans le document README.md
Exemple
* 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['SGQ.tms.org']:tms需要的网点的信息 + localStorage['SGQ.tms.org'].permissionId + localStorage['SGQ.tms.org'].orgName
2.3. Spécifications d'utilisation du stockage
2.3.1. Cause du problème
Ce problème survient parce que nous devons nous connecter avec des autorisations, puis lors de la connexion, il continue de signaler que l'espace de stockage est insuffisant. Après avoir vérifié la raison, nous avons constaté que le backend renvoyait tous les milliers de données super-gérées. il n'y avait pas assez d'espace et a ensuite modifié le contenu des données renvoyées par l'interface backend pour résoudre ce problème.
Mais à quoi cet incident nous a-t-il amené à réfléchir ?
La capacité de stockage du stockage local et du stockage de session est essentiellement de 5 M dans différents navigateurs
Le stockage du stockage local et du stockage de session suit le nom de domaine
Le stockage local sous boss.hivescm.com est de 5M
Le stockage local sous b2b.hivescm.com est également de 5M
Même si le problème est résolu cette fois, nous devrions élaborer un plan pour utiliser pleinement l'espace total de 10 millions de stockage local et de stockage de session sous un seul nom de domaine
2.3.2. Plan d'utilisation du stockage
Les objets utilisés globalement, les objets partagés et les objets stockés en permanence sont stockés dans le stockage local
N'oubliez pas de vider les objets qui n'ont pas besoin d'être stockés de manière permanente après utilisation
Si la quantité de données est trop importante, ne les stockez pas localement et obtenez-les dynamiquement
Vous pouvez utiliser Indexeddb avec une plus grande capacité de stockage, mais il existe des problèmes de compatibilité
Vous pouvez limiter le nombre de mots à stocker en stockage dans le plan de mise en œuvre
Utiliser pleinement et raisonnablement les fonctionnalités H5 de stockage de session et de stockage local
Par exemple : les données de liste stockées dans vuex seront en fait stockées dans localstorage
Par exemple : certaines données pour la vérification du formulaire utilisent le stockage de sessions
3. Autres
3.1. Prolongation
Cela peut être déduit du traitement des événements inutiles qui doivent être nettoyés à temps lors de la sortie du composant vue
. Par exemple : this.bus.$on('aa') devrait utiliser this.bus.$off('aa') pour décharger l'événement
3.2. 字符长短获取
var len = 0 for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) //全角 len += 2 //如果是全角,占用两个字节 如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节 else len += 1 //半角占用一个字节 } return len
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!