zoukankan      html  css  js  c++  java
  • 通过递归来封装sessionStorage---set/get/delete

    1.storage文件夹下面的index.js文件

    const  SRORAGE_KEY = 'mall';
    
    export default {
        getStorage(){
            return JSON.parse(window.sessionStorage.getItem(SRORAGE_KEY))
        },
    
        // 获取某个属性值
        getItem(key, module_key){
            if(module_key) {
                let module_val = this.getItem(module_key)
                if(module_val){
                    return module_val[key]
                }
            }else{
                let storage_val = this.getStorage();
                return storage_val[key]
            }
            
        },
    
        // 设置某个属性值
        setItem(key, val, module_key){
            if(module_key){
                let module_val = this.getItem(module_key)
                module_val[key] = val
                this.setItem(module_key, module_val)
            }else{
                let storage_val = this.getStorage();
                storage_val[key] = val
                window.sessionStorage.setItem(SRORAGE_KEY,JSON.stringify(storage_val))
            }        
        },
    
        // 清除某个属性值
        clearItem(key, module_key){
            if(module_key){
                let module_val = this.getItem(module_key)
                delete module_val[key]
                this.setItem(module_key, module_val)
            }else {
                let storage_val = this.getStorage();
                delete storage_val[key]
                window.sessionStorage.setItem(SRORAGE_KEY,JSON.stringify(storage_val))
            }
            
        }
    }

    2.在浏览器的sessionStorage部分,如下图

     3.在index.vue的应用页面中,把storage文件引入使用

    import storage from '../../storage/index.js'

    4.在index.vue的应用页面中的钩子函数mounted中应用 

    
    

    { 

          name: 'Index',
          data () {
              return {
              };
          },
        mounted(){
         //获取user属性值 console.log(storage.getItem('user'));
         //获取user下面的age的属性值 console.log(storage.getItem(
    'age','user'));
         //获取user下面的username的属性值 console.log(storage.getItem(
    'username','user'));
         //设置username:hhh
         storage.setItem('username','hhh')
    //user属性下面,设置passenger:llllll storage.setItem(
    'passenger','llllll','user')
         //user属性下面,设置fffff:mmmm
         storage.setItem('fffff','mmmm','user')
        
         //清除属性fffff storage.clearItem(
    'fffff')
         //清除属性aaa storage.clearItem(
    'aaa')
         //清除user属性下面的passenger属性
    storage.clearItem('passenger', 'user')
         //清除user属性下面的username属性 storage.clearItem(
    'username', 'user')
    } } </script>
  • 相关阅读:
    Vertica 业务用户指定资源池加载数据
    Vertica 数据库知识汇总篇
    Oracle OCP 1Z0-053 Exam Topics
    Oracle 11gR2 RAC修改监听默认端口
    Oracle 11.2.0.4 RAC安装最新PSU补丁
    Openfiler配置RAC共享存储
    ORACLE 11gR2 DG(Physical Standby)日常维护01
    oracle 存储过程 返回结果集
    exception javax.crypto.BadPaddingException: Given final block not properly padded
    plsql 连接oracle数据库的2种方式
  • 原文地址:https://www.cnblogs.com/pwindy/p/15161116.html
Copyright © 2011-2022 走看看