HTML 5-ローカルストレージ

7384 ワード

window.sessionStorage
window.localStorage
以前は、これらはクッキーで完成していました.しかし、cookieは、サーバに対する要求ごとに伝達されるため、大量のデータの記憶に適していない.これにより、cookieは速度が遅く、効率も高くない.
ローカルストレージの機能
1、ユーザーブラウザにデータを保存する
2、設定、読み取りが便利で、ページのリフレッシュさえデータを失わない
3、容量が大きく、sessionStorage約5 M、localStorage約20 M
4、文字列しか記憶できない、対象JSONを記憶できる.stringify()符号化後記憶

window.セッションストア
1、ライフサイクルはブラウザウィンドウを閉じる
2、同じウィンドウ(ページ)でデータを共有できる
3.キー値ペアとして格納使用

一般的な方法
データの保存:
sessionStorage.setltem(key,value)データの取得:
sessionStorage.getltem(key)
データの削除:
sessionStorage.removeltem(key)
すべてのデータを削除:
sessionStorage.clear()

window.localStorage
1、宣言周期は永久に有効で、手動で削除しない限り、ページを閉じることも存在する
2、マルチウィンドウ(ページ)で共有可能(同一ブラウザで共有可能)
3.キー値ペアとして格納使用

一般的な方法
データの保存:
localStorage.setItem(key, value)
データの取得:
localStorage.getItem(key)
データの削除:
localStorage.removeItem(key)
すべてのデータを削除:
localStorage.clear()

ユーザーを記憶する(localStorageを使用):

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
    head>
    <body>
           ：<input type="text" class="username">
             <input type="checkbox" class="remember"/>
        
        <script type="text/javascript">
            var username = document.querySelector('.username');
            var remember = document.querySelector('.remember');
            if(localStorage.getItem('username')){
                username.value = localStorage.getItem('username');
                remember.checked = true;
            }
            
            remember.addEventListener('change', function(){
                if(this.checked){
                    localStorage.setItem('username',username.value);
                }else{
                    localStorage.removeItem('username');
                }
            })
        script>
    body>
html>

golang面接基礎シリーズ-rangeの穴(三)

localStorageオブジェクトの保存