ブラウザーは、Window.sessionStorage プロパティと Window.localStorage プロパティを通じてローカルストレージメカニズムを実装します。

sessionStorage と localStorage の API は同じです。

localStorage(またはsessionStorage).setItem('key','value')

localStorage(またはsessionStorage).getItem('key')

localStorage(またはsessionStorage).removeItem('key')

localStorage(またはsessionStorage).clear()

コード例

HTML構造コード:

    <button onclick="saveData()">点我保存数据</button>
    <button onclick="readData()">点我读取数据</button>
    <button onclick="deleteData()">点我删除数据</button>
    <button onclick="deleteAllData()">点我清空数据</button>

スクリプトコード:

    <script>
        let person = {
            name: 'Mary',
            age: 18
        }

        function saveData() {
            //该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
            localStorage.setItem('msg1', 'hello!!!')
            localStorage.setItem('msg2', '我成功了')
            localStorage.setItem('msg3', '哈哈哈666')
            localStorage.setItem('person', JSON.stringify(person))
        }

        function readData() {
            //该方法接受一个键名作为参数，返回键名对应的值。
            console.log(localStorage.getItem('msg1'));
            console.log(localStorage.getItem('msg2'));
            console.log(localStorage.getItem('msg3'));
            const result = localStorage.getItem('person');
            //返回字符串
            console.log(result);
            //返回对象
            console.log(JSON.parse(result));
        }

        function deleteData() {
            //该方法接受一个键名作为参数，并把该键名从存储中删除。
            localStorage.removeItem('msg2')
        }

        function deleteAllData() {
            //该方法会清空存储中的所有数据。
            localStorage.clear()
        }
    </script>

結果を示す：

要約する

1. ストレージコンテンツのサイズは通常約 5MB をサポートします (デフォルトのストレージは文字列です)。

2. ブラウザーは、Window.sessionStorage プロパティと Window.localStorage プロパティを通じてローカルストレージメカニズムを実装します。

3. 関連 API:
1. xxxStorage.setItem('key', 'value');
このメソッドはキーと値をパラメータとして受け取り、キーと値のペアをストレージに追加します。キー名が存在する場合は、そのキー名を更新します。対応する値。

2. xxxStorage.getItem('person'); このメソッドはキー名をパラメータとして受け取り、キー名に対応する値を返します。

3. xxxStorage.removeItem('key'); このメソッドはキー名をパラメータとして受け取り、ストレージからキー名を削除します。

4. xxxStorage.clear(); このメソッドはストレージ内のすべてのデータをクリアします。

4. 備考:
1. SessionStorage に保存されたコンテンツは、ブラウザウィンドウを閉じると消えます。
2. LocalStorage に保存されているコンテンツは、消える前に手動でクリアする必要があります。
3. xxxStorage.getItem(xxx) xxxに該当する値が取得できない場合、getItemの戻り値はnullになります。
4. JSON.parse(null) の結果は依然として null です。

webStorage ローカルストレージ

要約する

おすすめ