Heim >Web-Frontend >js-Tutorial >So verwenden Sie Localstorage und Sessionstorage in Vue
Dieser Artikel stellt hauptsächlich die detaillierte Verwendung und Erfahrung von Localstorage und Sessionstorage in Vue vor. Freunde in Not können dem Herausgeber als Referenz und Studium folgen.
1. Mehrere Probleme bei der Verwendung des Projekts
Jeder verwendet direkt localstorage['aaa']='This is a example string' diese native Syntax-Implementierung , dieser Kopplungsgrad ist zu hoch. Wenn wir eines Tages die Implementierungsmethode ändern oder die Speichergröße steuern müssen, muss viel Code geändert werden
Das Projekt ist Sehr groß, daher muss jeder mit dem Schlüssel beginnen. Der Name wird unweigerlich wiederholt, was auch zu globaler Umweltverschmutzung führt
Da die Verwendung von Localstorage nicht standardisiert ist, führt dies zu Verschwendung und unzureichendem Speicherplatz
2. Lösung
Kapseln Sie die Speichernutzung und handhaben Sie sie einheitlich
Standardisieren Sie die Benennungsregeln für den Schlüsselwert des Speichers
Standardisieren Sie die Nutzung Speicherkapazität
2.1. Kapseln Sie die einheitliche Methode
Die Kapselung in Methoden kann den Kopplungsgrad verringern, den Wechsel von Implementierungsmethoden erleichtern und die Speichergröße steuern
Ändern der Implementierung kann durch die Konfiguration verschiedener Parameter erreicht werden
Bearbeiten Sie die gezeigte Projektstruktur
Code-Implementierung
/* * 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. Standardisieren Sie die Verwendung von Namespaces
In der Reihenfolge Um die Verschmutzung von Schlüsselwerten zu verhindern, können wir Namespaces sinnvoll verwenden
Wir können einen Namespace definieren, aber wir können nicht viele Daten im selben Objekt speichern, sodass die Anzahl der nachfolgenden Vorgänge zu groß ist
Zum Beispiel ist das Globale unter global
Zum Beispiel das Hinzufügen von Systemzusätzen für jedes funktionale System
Die Namespace-Spezifikation eines Systems sollte im Voraus entworfen werden, sonst werden es viele Leute tun Verwenden Sie es, ohne die Regeln während der tatsächlichen Entwicklung zu befolgen
Dinge, die global verwendet werden, müssen im README.md-Dokument wiedergegeben werden. Kommen Sie heraus
Beispiel
* 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 Speichernutzungsspezifikationen
2.3.1. Ursache des Problems
Dieses Problem tritt auf, weil wir Berechtigungen erteilen müssen. Nach dem Anmelden erhielt ich immer wieder Meldungen über unzureichenden Speicherplatz. Nachdem ich den Grund überprüft hatte, stellte ich fest, dass das Backend Ich habe alle Tausenden von superverwalteten Daten zurückgegeben, was nicht ausreichte. Später habe ich die von der Backend-Schnittstelle zurückgegebenen Daten geändert, um dieses Problem zu lösen.
Aber worüber hat uns dieser Vorfall zum Nachdenken gebracht?
Die Speicherkapazität von Localstorage und Sessionstorage beträgt in verschiedenen Browsern grundsätzlich 5M
Der Speicher von Localstorage und Sessionstorage folgt dem Domänennamen
localstorage unter boss.hivescm.com Der Speicher ist 5M
Der lokale Speicher unter b2b.hivescm.com ist ebenfalls 5M
Auch wenn das Problem dieses Mal gelöst ist, sollten wir einen Plan erstellen, um Localstorage und Sessionstorage unter einem vollständig zu nutzen Domänenname. Insgesamt 10 Mio. Speicherplatz
2.3.2. Speichernutzungsplan
Dinge, die global genutzt, geteilt und dauerhaft gespeichert werden, werden im lokalen Speicher gespeichert
Es ist kein dauerhafter Speicher erforderlich Denken Sie daran, die Dinge rechtzeitig nach der Verwendung zu löschen
Wenn die Datenmenge zu groß ist, speichern Sie sie nicht lokal und ändern Sie sie auf dynamische Erfassung
Sie können Indexeddb mit größerer Speicherkapazität verwenden, aber Es liegt ein Kompatibilitätsproblem vor
Sie können die Anzahl der im Speicher zu speichernden Wörter im Implementierungsplan begrenzen
Nutzen Sie die H5-Funktionen von Sessionstorage und Localstorage vollständig und angemessen
Zum Beispiel: Listendaten werden tatsächlich in Localstorage gespeichert
Zum Beispiel: Einige Daten zur Formularüberprüfung verwenden Sessionstorage
3 >
3.1. Erweiterung Dies lässt sich auf die Verarbeitung nutzloser Ereignisse beim Beenden der Vue-Komponente zurückführen. Zum Beispiel: .bus.$on('aa') sollte für dieses.bus.$off('aa')-Deinstallationsereignis verwendet werden3.2. Zeichenlängenerfassungvar 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 lenDas Obige habe ich zusammengestellt für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird. Verwandte Artikel:
JS-Plug-in für Webformulare (hochwertige Empfehlung)
So implementieren Sie die Online-Kundendienstfunktion in jQuery
So fügen Sie dynamisch zur Liste in jQuery hinzu
Informationen zu Optimierungskonfigurationsproblemen in Webpack
In So erstellen Sie eine Electron-Anwendung in Webpack
Probleme mit unsicheren Bildpfaden mit Angular4
So implementieren Sie die Kreuzkoordinatenverfolgung Mauseffekt in JS
So verwenden Sie das EasyUI-Fenster in jQuery
So verwenden Sie das Datums-Plug-in vonlaydate.js in Angular4.0
So implementieren Sie den Label-Scrolling-Wechsel in JS
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Localstorage und Sessionstorage in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!