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>
  • 相关阅读:
    leetcode刷题笔记九十八题 验证二叉搜索树
    leetcode刷题笔记九十七题 交错字符串
    leetcode刷题笔记九十六题 不同的二叉搜索树
    leetcode刷题笔记九十五题 不同的二叉搜索树II
    leetcode刷题笔记九十四题 二叉树的中序遍历
    leetcode刷题笔记九十三题 复原IP地址
    java 语句流程
    java byte/short/char补充(了解)
    Java反射机制demo(四)—获取一个类的父类和实现的接口
    AOP方法拦截获取参数上的注解
  • 原文地址:https://www.cnblogs.com/pwindy/p/15161116.html
Copyright © 2011-2022 走看看