English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1. 프로젝트 사용 중에 드러난 몇 가지 문제
모두가 localstorage['aaa'] = '이것은 예제 문자열입니다'와 같은 원시 문법을 직접 사용하면 결합도가 너무 높습니다. 또한, 실제로 구현 방식을 변경하거나 저장 크기를 제어하려면 많은 코드를 수정해야 합니다
프로젝트가 크면, 모두가 만든 키 이름이 반복될 가능성이 높습니다. 이렇게 하면 전체가 오염될 수도 있습니다
로컬 스토리지의 사용이 규범이 없어 저장 공간의 낭비와 부족이 발생했습니다
2. 해결책
storage의 사용 메서드를 래핑하고 일관되게 처리하십시오
storage의 키 값의 이름 규칙을 규정화하십시오
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:
*
* 1LocalStorage의 사용
* 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
// });
// }
// } 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) {
콘솔 로그('현재 브라우저는 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 초과 최대 제한')
clearInterval(show)
}
}, 0.1)
},
// 사용된 localStorage 공간을 가져오기
getUsedSpace(){
if (!window.localStorage) {
콘솔 로그('브라우저는 localStorage를 지원하지 않습니다')
}
var size = 0
for (item in window.localStorage) {
if (window.localStorage.hasOwnProperty(item)) {
size += window.localStorage.getItem(item).length
}
}
콘솔 로그('현재 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) {
콘솔 로그('현재 브라우저는 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 초과 최대 제한')
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 +
}
}
console.log('현재 sessionStorage 사용 용량은 ' + / 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. 네임스페이스 사용 규범
키 값 오염을 방지하기 위해 네임스페이스를 합리적으로 사용할 수 있습니다
우리는 네임스페이스를 정의할 수 있지만, 많은 데이터를 동일한 객체 안에 저장하지 않도록 해야 합니다. 그렇지 않으면 이후의 작업량이 너무 많아질 수 있습니다
예를 들어 전체적인 것은 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['SGQ.tms.org']: tms가 필요한 점포 정보 + localStorage['SGQ.tms.org'].permissionId + localStorage['SGQ.tms.org'].orgName
2.3. storage 사용 규범
2.3.1. 문제 발생 원인
이 문제가 발생한 이유는 권한 로그인을 해야 하기 때문입니다. 로그인할 때마다 저장 공간이 부족하다는 문제가 발생했고, 원인을 조사한 결과, 백엔드가 모든 관리자의 수천 개의 데이터를 모두 반환했기 때문에 부족해졌다는 것을 발견했습니다. 나중에 백엔드 인터페이스가 반환하는 데이터 내용을 수정하여 이 문제를 해결했습니다.
그러나 이번 일은 우리에게 몇 가지 생각을 가져왔습니다?
localStorage와 sessionStorage의 저장량은 다른 브라우저에서는 기본적으로5M
localStorage와 sessionStorage의 저장은 도메인에 따라 옵니다.
boss.hivescm.com 하에서 localStorage 저장은5M
b2b.hivescm.com 하에서 localStorage 저장도5M
이번 문제가 해결되었지만, 도메인 하에서 localStorage와 sessionStorage의 공통점을 최대한 활용할 수 있는 계획을 세워야 합니다.10M 공간
2.3.2. storage 사용 계획
전체적으로 사용되는 것, 공유되는 것, 영구적으로 저장되는 것은 localStorage에 저장됩니다.
사용이 끝난 후에는 반드시 즉시 지우기 위해 기억해야 할 것이 없습니다.
如果数据量过大就不要存储在本地了，变为动态获取
可以使用存储量更大的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) //全角
len += 2 //如果是全角，占用两个字节 如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
else
len += 1 //半角占用一个字节
}
return len
以上就是小编整理的关于Vue中localstorage和sessionstorage的用法的全部内容，感谢你对呐喊教程的支持。
성명: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유합니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 웹사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있다면, notice#w로 이메일을 보내 주세요.3codebox.com（이메일을 보내면, #을 @으로 변경해 주세요. 신고를 해 주시고, 관련 증거를 제공하시면, 해당 사이트는 즉시 저작권 침해 내용을 삭제합니다。）