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>