一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--Storage封装
advertisement

使用vue全家桶高仿小米商城--Storage封装

1、Cookie、localStorage、sessionStorage三者的区别
 
1.1、存储大小:Cookie ->4K Storage ->5M
1.2、有效期:Cookie有用有效期,Strage永久储存
1.3、Cookie会发送到服务器端,存储在内存中(sessionStorage也是存储在内存中),Storage只存储在浏
 
览器端(localStorage)
1.4:路径:Cookie有路径限制,Storage只存储在域名下
1.5:API:Cookie没有特定的API,Storage有对应的API
 
2、为什么要封装Storage,本身不是已经有IPA?
 
2.1、Storage本身有API,但是只是简单的key/value形式
2.2、Storage只存储字符串,需要手工转换成json对象
2.3、Storage只能一次性清空,不能单个清空

A、首先在浏览器上加入下图所示的数据:

B、在storage下的index.js(如图所示)里面加入以下代码

代码如下:

  1. /* 
  2. Storage封装 
  3. */  
  4. const STORAGE_KEY = 'mall'  
  5.   
  6. export default{  
  7.     //存储值  
  8.     setItem(key,value,module_name){  
  9.         if(module_name){  
  10.             let val = this.getItem(module_name);  
  11.             val[key] = value;  
  12.             this.setItem(module_name,val);  
  13.         }else{  
  14.             let val = this.getStorage();  
  15.             val[key] = value;  
  16.             window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val))  
  17.         }  
  18.     },  
  19.     //获取值,获取某一个模块下面的属性,例如:user下面的userName  
  20.     getItem(key,module_name){  
  21.         //获取user  
  22.         if(module_name){  
  23.             let val = this.getItem(module_name);  
  24.             if(val) return val[key];  
  25.         }  
  26.         return this.getStorage()[key]  
  27.     },  
  28.     //获取整个数据  
  29.     getStorage(){  
  30.         return JSON.parse(window.sessionStorage.getItem('mall') || '{}');  
  31.     },  
  32.     //清空值  
  33.     clear(key, module_name){  
  34.         //获取到所有的信息  
  35.         let val = this.getStorage();  
  36.         if(module_name){  
  37.             delete val[module_name][key]  
  38.         }else{  
  39.             delete val[key];  
  40.         }  
  41.         window.sessionStorage.setItem(STORAGE_KEY,JSON.stringify(val));  
  42.     }  
  43. }  
C、然后再在App.vue文件里面测试storage是否有效,代码如下:

  1. <template>  
  2.   <div id="app">  
  3.    <router-view></router-view>  
  4.   </div>  
  5. </template>  
  6.   
  7. <script>  
  8. import storage from './storage'  
  9.   
  10. /* eslint-disable */  
  11. export default {  
  12.   name: 'app',  
  13.   components: {  
  14.       
  15.   },  
  16.   data() {  
  17.     return{  
  18.           
  19.     }  
  20.   },  
  21.   mounted(){  
  22.       // storage.setItem('a',2);  
  23.       // storage.setItem('user',{a:1});  
  24.       storage.setItem('abc',{a:1},'user');  
  25.   }  
  26. }  
  27. </script>  
  28.   
  29. <style>  
  30. #app {  
  31.   font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  32.   -webkit-font-smoothing: antialiased;  
  33.   -moz-osx-font-smoothing: grayscale;  
  34.   text-align: center;  
  35.   color: #2c3e50;  
  36.   margin-top: 60px;  
  37. }  
  38. </style>  

效果图如下所示:



zhangren.online
上一篇:使用vue全家桶高仿小米商城--分离组件和配置路由
下一篇:使用vue全家桶高仿小米商城--接口错误拦截

您可能喜欢

​vue中非父子组件传值

​vue中非父子组件传值

​vue中ref的使用

​vue中ref的使用

回到顶部