快捷導(dǎo)航

Vue?瀏覽器本地存儲(chǔ)的問(wèn)題小結(jié)

更新時(shí)間：2022年04月02日 16:09:01 作者：Errol_King

這篇文章主要介紹了Vue?瀏覽器本地存儲(chǔ),LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲(chǔ)大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧

localstorage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀏覽器本地存儲(chǔ)</title>
</head>
<body>
<div id="root">
    <button onclick="saveData()">點(diǎn)我保存一個(gè)數(shù)據(jù)</button>
    <button onclick="readData()">點(diǎn)我讀取一個(gè)數(shù)據(jù)</button>
    <button onclick="deleteData()">點(diǎn)我刪除一個(gè)數(shù)據(jù)</button>
    <button onclick="deleteAllData()">點(diǎn)我清空數(shù)據(jù)</button>
</div>
<script type="text/javascript">
    let person = {name:"張三",age:"18"}
    function saveData() {
        localStorage.setItem("msg","hello")
        localStorage.setItem("msg2",666)
        localStorage.setItem("msg3",JSON.stringify(person))
    }
    function readData(){
        console.log(localStorage.getItem("msg"))
        console.log(localStorage.getItem("msg2"))

        const result = localStorage.getItem("msg3")
        console.log(result)
        console.log(JSON.parse(result))
    }
    function deleteData(){
        localStorage.removeItem("msg")
    }
    function deleteAllData(){
        localStorage.clear()
    }
</script>
</body>
</html>

在這里插入圖片描述

SessionStorage

和 LocalStorage 用法相同，把上邊代碼中的 localStorage改為sessionStorage

在這里插入圖片描述

總結(jié)

LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage
1.存儲(chǔ)內(nèi)容大小一般支持5MB左右(不同瀏覽器可能還不一樣)
⒉瀏覽器端通過(guò) Window.sessionStorage 和Window.localStorage屬性來(lái)實(shí)現(xiàn)本地存儲(chǔ)機(jī)制
3.相關(guān)API：
1.xxxxxStorage.setItem( " key’ , “value”);
該方法接受一個(gè)鍵和值作為參數(shù)，會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值
2.xxxxxStorage.getItem( “person”);
該方法接受一個(gè)鍵名作為參數(shù)，返回健名對(duì)應(yīng)的值
3.xxxxxStorage.removeItem( “key”);
該方法接受一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除
4.xxxxxStorage.clear()
該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)
4.備注：
1.SessionStorage 存儲(chǔ)的內(nèi)容會(huì)隨著瀏覽器窗口關(guān)閉而消失2.LocalStorage 存儲(chǔ)的內(nèi)容，需要手動(dòng)清除才會(huì)消失（調(diào)用api 或清空緩存）
3. xxxxStorage.getItem(xxx)，如果 xxx 對(duì)應(yīng)的 value 獲取不到，那么 getltem 的返回值是null
4.JSON.parse(null) 的結(jié)果依然是 null

TodoList 改為本地存儲(chǔ)

我們之前寫的 TodoList 案例數(shù)據(jù)是寫死的，每次刷新都恢復(fù)到寫死的數(shù)據(jù)，我們現(xiàn)在把它改為本地存儲(chǔ)。修改 App.vue，把 todos 改為深度監(jiān)視，每當(dāng) todos 發(fā)生變化就使用本地存儲(chǔ)存儲(chǔ)數(shù)據(jù)。同時(shí)初始化的時(shí)候，todos 賦值是從本地存儲(chǔ)讀取的

......
<script>
......
export default {
  ......
  data() {
    return {
      //讀取本地存儲(chǔ)
      todos: JSON.parse(localStorage.getItem("todos")) || []
    }
  },
  methods: {
    ......
  },
  watch:{
    //深度監(jiān)視
    todos:{
      deep:true,
      handler(value){
        localStorage.setItem("todos",JSON.stringify(value))
      }
    }
  }
}
</script>
......

運(yùn)行程序，輸入數(shù)據(jù)，刷新瀏覽器，數(shù)據(jù)不會(huì)消失

在這里插入圖片描述