Vue에서 로컬 저장소 및 세션 저장소를 사용하는 방법

이 글에서는 주로 Vue의 로컬 저장소와 세션 저장소에 대한 자세한 사용법과 경험을 소개합니다. 도움이 필요한 친구는 편집자를 따라 참고하고 공부할 수 있습니다.

1. 프로젝트 사용 중에 노출된 몇 가지 문제

모두가 localstorage['aaa']='This is a 샘플 문자열' 및 기타 기본 구문 구현을 사용합니다. 구현 방법을 변경하거나 저장 크기를 어느 정도 제어해야 하는 날에는 수정해야 할 코드가 많이 있을 것입니다

프로젝트 규모가 커서 모두가 제공하는 키 이름이 필연적으로 반복될 것입니다. 이로 인해 지구 오염도 발생하게 됩니다

로컬 스토리지의 사용이 표준화되지 않아 낭비가 발생하고 저장 공간이 부족하기 때문입니다.

2. 솔루션

스토리지 사용량을 캡슐화하여 균일하게 처리하세요

네이밍 규칙을 표준화하세요. 저장소 키 값
저장소 사용 표준화

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])
 * 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 네임스페이스 사용 표준화

키 값 오염을 방지하기 위해 네임스페이스를 합리적으로 사용할 수 있습니다

네임스페이스를 정의할 수 있습니다. , 하지만 동일한 개체에 많은 데이터를 저장할 수 없으므로 나중에 연산량이 너무 커질 것입니다

예를 들어 전역 시스템은 전역 아래에 있습니다

예를 들어 각 기능 시스템에는 시스템 접미사가 추가됩니다

시스템의 네임스페이스 사양은 미리 설계해야 합니다. 그렇지 않으면 실제로 개발할 때 많은 사람들이 규칙에 따라 사용하지 않을 것입니다.

글로벌하게 사용되는 것들은 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 .저장소 사용 사양

2.3.1.문제 원인

이 문제는 권한으로 로그인해야 하기 때문에 발생합니다. 그런데 로그인을 해보니 저장 공간이 부족하다는 알림이 계속 뜹니다. 백엔드가 수천 개의 슈퍼 관리형 데이터를 모두 반환했지만 이는 충분하지 않았습니다. 나중에 이 문제를 해결하기 위해 백엔드 인터페이스에서 반환된 데이터 콘텐츠를 수정했습니다.

그런데 이 사건이 우리에게 무엇을 생각하게 만들었나요?

localstorage와 sessionstorage의 저장 용량은 기본적으로 다른 브라우저에서 5M입니다

localstorage와 sessionstorage의 저장 용량은 도메인 이름을 따릅니다.

boss.hivescm.com의 localstorage 저장 용량은 5M

b2b.hivescm.com의 localstorage입니다. 도 5M

이번에 문제가 해결되더라도 하나의 도메인 이름으로 로컬 저장소와 세션 저장소의 총 10M 공간을 최대한 활용할 계획을 세워야 합니다

2.3.2 저장소 사용량 계획

전 세계적으로 사용되는 것 영구적으로 저장되는 것은 로컬스토리지에 저장됩니다

영구적으로 저장될 필요가 없는 것은 사용 후 시간이 지나면 삭제해야 합니다

데이터의 양이 너무 많으면 로컬에 저장하지 말고 동적으로 변경하세요 획득

더 큰 볼륨으로 Storage Indexeddb를 사용할 수 있지만 호환성 문제가 있습니다

구현 계획에서 저장소에 저장되는 단어 수를 제한할 수 있습니다

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

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

웹 양식용 JS 플러그인(고품질 권장)

jQuery에서 온라인 고객 서비스 기능을 구현하는 방법

jQuery에서 목록에 동적으로 추가하는 방법

Webpack 최적화 구성 문제 관련

Webpack에서 Electron 애플리케이션을 구축하는 방법

Angular4를 사용하여 안전하지 않은 이미지 경로에 대한 문제

JS에서 마우스 효과에 따른 교차 좌표를 구현하는 방법

방법 jQuery EasyUI 창에서 사용하세요

Angular4.0에서laydate.js 날짜 플러그인을 사용하는 방법

JS에서 라벨 스크롤 전환을 구현하는 방법

위 내용은 Vue에서 로컬 저장소 및 세션 저장소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!