一、localStorage存储

LocalStorage存储的是字符串，除了number值，其他的都要加双引号。即存储的只能是基本数据类型，引用数据类型没法识别。     将引用型加上双引号后：设置成功   但是如果键名相同，会覆盖掉前面存储的值，如图：   因此需要采用命名空间的方法来进行localStorage的二次封装。

二、LocalStorage的二次封装

1.创建封装文件

在src目录下创建utils目录，在utils下创建storage.js文件。

代码如下：

在前面axios二次封装中提到过的config.js，在里面添加命名空间： 

src-utils-storage.js

import config  from "./../config"
export default{
    setItem(key,val){//设置值
        // let storage = window.localStorage.getItem(Namespace)封装
        let storage = this.getStorage()
        storage[key] = val
        // debugger：可进入debugger模式
        window.localStorage.setItem(config.namespace,JSON.stringify(storage))
    },
    getItem(key){//获取值
        return this.getStorage()[key]
    },
    getStorage(){//获取对应命名空间对象
        return JSON.parse(window.localStorage.getItem(config.namespace) || "{}")
    },
    clearItem(){//删除对应值
        let storage = this.getStorage()
        delete storage[key]
        window.localStorage.setItem(config.namespace,JSON.stringify(storage))
    },
    clearAll(){//清除所有值
        window.localStorage.clear()
    }
}

// storage二次封装：localStorage原生api不好用，因此要进行封装
//JSON.parse()把字符串转换为对象
//JSON.stringify()把对象转换为字符串

2.在main.js中全局挂载

代码如下：

import storage from './utils/storage'
app.config.globalProperties.$storage = storage

3.在App.vue文件中使用

<script>
  export default{
    name:'app',
    mounted(){
      // this.$storage.setItem('name','tom')
      // this.$storage.setItem('age',18)
      this.$storage.setItem('userInfo',{age:30,name:'jack'}
    }
  }
</script>

<template>
  <router-view></router-view>
</template>

结果：每次命名的都能追加在相同命名空间的后面，后设置的不会覆盖前面设置的。