首頁 >web前端 >js教程 >在Vue中有關於localstorage和sessionstorage如何使用

在Vue中有關於localstorage和sessionstorage如何使用

亚连
亚连原創
2018-06-19 10:08:281876瀏覽

這篇文章主要介紹了詳解Vue中localstorage和sessionstorage的使用方法和經驗心得,有需要的朋友跟著小編參考學習下吧。

1. 專案使用中暴露出來的幾個問題

大家到處直接使用localstorage['aaa']='這是一段範例字串'這些原生語法實現,這樣耦合度太高了,假如有一天我們需要換實現方式,或是對儲存大小做一些控制,那麼需要修改的程式碼就會很多

項目很大,那麼大家起的key的名字難免會重複,而且這樣也會造成全域污染

因為localstorage的使用不規範,所以造成了儲存空間的浪費和不夠用

2. 解決方案

封裝storage的使用方法,統一處理

規範storage的key值的命名規則
規範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:
 *
 * 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(&#39;当前浏览器不支持localStorage!&#39;)
  }
  var test = &#39;0123456789&#39;
  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(&#39;test&#39;)
    window.localStorage.setItem(&#39;test&#39;, sum)
    console.log(sum.length / 1024 + &#39;KB&#39;)
   } catch (e) {
    console.log(sum.length / 1024 + &#39;KB超出最大限制&#39;)
    clearInterval(show)
   }
  }, 0.1)
 },
 // 获取使用了的localstorage的空间
 getUsedSpace(){
  if (!window.localStorage) {
   console.log(&#39;浏览器不支持localStorage&#39;)
  }
  var size = 0
  for (item in window.localStorage) {
   if (window.localStorage.hasOwnProperty(item)) {
    size += window.localStorage.getItem(item).length
   }
  }
  console.log(&#39;当前localStorage使用容量为&#39; + (size / 1024).toFixed(2) + &#39;KB&#39;)
 }
}
/*
 * 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(&#39;当前浏览器不支持sessionStorage!&#39;)
  }
  var test = &#39;0123456789&#39;
  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(&#39;test&#39;)
    window.sessionStorage.setItem(&#39;test&#39;, sum)
    console.log(sum.length / 1024 + &#39;KB&#39;)
   } catch (e) {
    console.log(sum.length / 1024 + &#39;KB超出最大限制&#39;)
    clearInterval(show)
   }
  }, 0.1)
 },
 // 获取使用了的localstorage的空间
 getUsedSpace(){
  if (!window.sessionStorage) {
   console.log(&#39;浏览器不支持sessionStorage&#39;)
  }
  var size = 0
  for (item in window.sessionStorage) {
   if (window.sessionStorage.hasOwnProperty(item)) {
    size += window.sessionStorage.getItem(item).length
   }
  }
  console.log(&#39;当前sessionStorage使用容量为&#39; + (size / 1024).toFixed(2) + &#39;KB&#39;)
 }
}
/*
 * 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. 規範命名空間的使用

為了防止key值污染,我們可以合理使用命名空間

我們可以定義命名空間,但是不能把很多資料存放在同一物件裡面,這樣後面的操作量會太大

#例如全域的在global下面

例如各功能係統的加上系統詞綴

一個系統的命名空間規格應該提前設計好,否則真正開發起來會有很多人不按照規則使用

全局使用的東西要在README.md文件中體現出來

範例

* localStorage[&#39;SGQ.global.userAuthor&#39;]:登录的用户信息都在这里,菜单,组织,集团
* localStorage[&#39;SGQ.global.systemName&#39;]:登录的系统名称
* localStorage[&#39;SGQ.vuex.state&#39;]:vuex中的state的存储地址,这里面有所有的的东西
* localStorage[&#39;SGQ.wms.warehouse&#39;]:wms需要的仓库信息
+ localStorage[&#39;SGQ.wms.warehouse&#39;].permissionId
+ localStorage[&#39;SGQ.wms.warehouse&#39;].dataResource
* localStorage[&#39;SGQ.tms.org&#39;]:tms需要的网点的信息
+ localStorage[&#39;SGQ.tms.org&#39;].permissionId
+ localStorage[&#39;SGQ.tms.org&#39;].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

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

Web表單的JS外掛程式(精品推薦)

在jQuery如何實作線上客服功能

在jQuery中如何實作新增

##在Webpack中如何建構Electron應用

使用Angular4有關圖片路徑不安全的問題

在JS中如何實作十字座標跟隨滑鼠效果

在jQuery如何使用EasyUI window視窗

####在Angular4.0中如何使用laydate.js日期外掛程式####### #####在JS中如何實作標籤滾動切換######

以上是在Vue中有關於localstorage和sessionstorage如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn