Vue数据实现本地存储localStorage或sessionStorage

1.概念

可以将数据临时存储到本地浏览器，一般大小最大为5M，存储的时候形式是字符串，早期可以做网站搜索记录的存储，随着云原生的不断发展，搜索记录，浏览记录不断转向了云端存储方式。

分类：

永久存储 使用localStorage

临时存储 使用sessionStorage

2.接口

（上面两种存储方式接口名称一样）：

window.localStorage.setItem() 存数据，传入的应是一个JSON串

window.localStorage.getItem() 获取数据。接受到后应进行解析，为防止没有数据应加一个|| “”

window.localStorage.removeItem() 删除数据。传入的是一个键

window.localStorage.clear()

读取与写入的时候可以使用JSON进行解析，写入的时候如果不解析，会导致存储异常

读取的时候不解析，读到的将是一个字符串。JSON解析null结果还是null

JSON.stringify()

JSON.parse()

存储的时候使用的是键值对的形式，对一个键进行多次存储以最后一次为准

3.实际操作 utils/session_storage.js

export default {
    /**
     * 添加
     * @param {*} key 键名
     * @param {*} params 值
     * @param {*} pre 前缀字符
     */
    addStorage(key,params,pre){
        if(!pre){
            pre = ""
        }
        if(!key){
            return
        }
        if(typeof(params) == "undefined"){
            params = null
        }
        sessionStorage.setItem(pre+"_"+key,JSON.stringify(params))
    },
    /**
     * 取数据
     * @param {*} key 键名
     * @param {*} pre 前缀字符
     * @returns
     */
    getStorage(key,pre){
        if(!pre){
            pre = ""
        }
        if(!key){
            return
        }
        var new_key = pre+"_"+key
        return JSON.parse(sessionStorage.getItem(new_key))

    },

    /**
     * 删除数据
     * @param {*} key 键名
     * @param {*} pre 前缀字符
     */
    delStorage(key,pre){
        if(!pre){
            pre = ""
        }
        if(!key){
            return
        }
        var new_key = pre+"_"+key
        sessionStorage.removeItem(new_key)
    },
    /**
     * 清空数据
     */
    delAllStorage(){
        sessionStorage.clear()
    },

}

4. hellow.vue

<script>
import { defineComponent, reactive, toRefs } from 'vue'

import session_storage from '@/utils/session_storage'


export default defineComponent({
  
    created(){
    
        session_storage.addStorage("id",123,"pre_str")

    },
})
</script>