Web(vue)本地儲存

阿新 • • 發佈：2022-03-29

Web(vue)本地儲存

Web Storage API

關鍵物件

window.sessionStorage物件用於區域儲存；
window.localStorage物件用於本地儲存。

特點

資料的設定和讀取比較方便。
容量較大，sessionStorage大約為5MB，localStorage大約為20MB。
只能儲存字串，若想要儲存JSON物件，則可以使用window.JSON.stringify()或者parse()進行序列化和反序列化編碼

區別

sessionStorage的儲存週期只有一次會話（關閉瀏覽器就會消失）

localStorage的儲存週期是永久的（關閉瀏覽器資料還在），除非使用者手動清除瀏覽器快取檔案

屬性和方法

window.localStorage.setItem('鍵','值')

window.sessionStorage.setItem('鍵','值')

方法/屬性	描述
key(n)	該方法用於返回儲存物件中第n個key的名稱
setItem(key, value)	該方法接收一個鍵名和值作為引數，將會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應的值
getItem(key)	該方法接收一個鍵名作為引數，返回鍵名對應的值
removeItem(key)	該方法刪除鍵名為key的儲存內容
clear()	該方法清空所有儲存內容
length	該屬性返回Storage儲存物件中包含的item的數量

localStorage簡單資料儲存例項

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username">
    <button id="setData">設定資料</button>
    <button id="getData">獲取資料</button>
    <button id="delData">刪除資料</button>

    <script>
        var username = document.querySelector('#username');
        // 單擊“設定資料”按鈕，設定資料
        document.querySelector('#setData').onclick = function () {
            var val = username.value; // 獲取username裡面的值
            //window.sessionStorage.setItem('username', val);//一個會話，關閉網頁後，資料不會儲存
            window.localStorage.setItem('username',val)//只要不主動清除，一直都在
        };
        // 單擊“獲取資料”按鈕，獲取資料
        document.querySelector('#getData').onclick = function () {
            // alert(window.sessionStorage.getItem('username'));
            alert(window.localStorage.getItem('username'))
        };
        // 單擊“刪除資料”按鈕，刪除資料
        document.querySelector('#delData').onclick = function () {
            // window.sessionStorage.removeItem('username');
            window.localStorage.removeItem('username')
        };

        if (window.sessionStorage) {
            // 瀏覽器支援sessionStorage
        } else if (window.localStorage) {
            // 瀏覽器支援localStorage
        }
    </script>

    </script>
</body>
</html>

localStorage在Vue中的例項（標籤記錄器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
        integrity="sha384-t1tHLsbM7bYMJCXlhr0//00jSs7ZhsAhxgm191xFsyzvieTMCbUWKMhFg9I6ci8q"
        crossorigin="anonymous"></script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .divcenter {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 50%;
        }
        p {
            border: solid 1px;
            margin: 0px;
            padding: 0px;
        }
        .spanX {
            float: right;
            margin-right: 10px;
            width: 10px;

        }
        span {
            cursor: pointer;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app" class="divcenter">
        <h2>標籤記錄器</h2>
        <!--文字框，設定雙向繫結和回車事件-->
        <div>
            <input type="text" placeholder="請輸入相應資訊後按回車鍵！" v-model="text" @keyup.Enter="info"
                style="width: 100%;height: 40px;">
        </div>    
        <div>
               <!--回車後新增的標籤和刪除按鈕-->
            <p v-for="(list,index) in arr">
                <span style="background-color: blanchedalmond;"> {{index+1}} </span>
                {{list}}
                <span class="spanX" @click="del(index)">x</span>
            </p>   
               <!--顯示總數和清空按鈕-->
            <div style="border: solid 1px;" v-show="arr.length!=0">
                <span>總數：{{arr.length}}</span>
                <span style="float: right;" @click="delAll">Clear</span>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //記錄資料的陣列，將儲存到localStorage的字串資料轉換為物件資料重新儲存到陣列中
                arr: JSON.parse(window.localStorage.getItem('UserData')||'[]'),
                text: "",
            },
            methods: {
                //回車觸發事件，把文字框裡的內容儲存到陣列arr中
                info: function () {
                    //在末尾新增一條資料
                    this.arr.push(this.text);
                    this.text = "";
                },
                //單擊刪除按鈕觸發事件，清除指定下標陣列的值
                del: function (index) {
                    //根據下標刪除1條資料
                    this.arr.splice(index, 1);
                },
                //單擊清空按鈕，清除陣列arr裡所有是值
                delAll: function () {
                    this.arr = [];
                }
            },
       
            //監聽事件
            watch:{
                //資料在標籤內部改變是否觸發：true
                deep:true,
                //要記錄資料的陣列，（名字要好儲存資料的陣列名一致），當arr資料傳送改變時觸發，新的資料返回到newVale中
                arr(newVale){
                    //將新的物件資料轉換為字串資料賦值給變數
                    let json_data=JSON.stringify(newVale)
                    //將字串資料按照鍵值對的方式儲存到localStorage中
                    window.localStorage.setItem('UserData',json_data)
                }        
            }
        })  
    </script>
</body>
</html>