localStorage詳細まとめ

一、localStorage概要:
HTML 5には、ローカルストレージとして主に使用されるlocalStorageプロパティが新たに追加され、cookieのストレージスペースが不足している問題(cookieの各cookieのストレージスペースは4 k)を解決し、localStorageの一般的なブラウザでは5 Mサイズがサポートされており、これはブラウザによってlocalStorageが異なる.
 
二、localStorageの優勢と限界:
メリット:
1、localStorageはクッキーの4 K制限を広げた
2、localStorageでは、最初に要求されたデータをローカルに直接保存できます.この5 Mサイズのフロントエンドページ向けのデータベースは、クッキーよりも帯域幅を節約できますが、これは高バージョンのブラウザでしかサポートされていません.
 
制限:
1、ブラウザのサイズが統一されておらず、IE 8以上のIEバージョンではlocalStorageという属性がサポートされていない
2、現在、すべてのブラウザでlocalStorageの値タイプをstringタイプに限定しています.これは日常的によく見られるJSONオブジェクトタイプにいくつかの変換が必要です.
3、localStorageはブラウザのプライバシーモードの下では読み取れない
4、localStorageは本質的に文字列の読み取りであり、記憶内容が多いとメモリスペースが消費され、ページがカード化される
5、localStorageは爬虫類に捕まえられない
 
三、localStorageの使用:
localStorageはhtml 5の新しい特性なので、すべてのブラウザがサポートしているわけではないので、localStorageを使用するときは、ブラウザがlocalStorageをサポートしているかどうかを判断する必要があります.
次のコードは、ブラウザがlocalStorageをサポートしているかどうかを判断するために使用されます.

    
    


     
        if (window.localStorage) {
            alert("     localStorage")
        } else {
            alert("      localStrorage")
        }
    

　　
localStorageがデータにアクセスするためのものである以上、まずlocalStorageがデータを格納することから始めましょう.

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            storage.a="  a"
            alert(storage.a)
        } else {
            alert("      localStrorage")
        }
    

　　
上のコードはlocalStorageでフィールドaにアクセスしました.値は「私はaです」です.
localStorageは複数のアクセス値をサポートしていますので、見てみましょう

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            //       
            storage.a="  a"
            //       
            storage['b']=100
            //       
            storage.setItem('c',"  c")


            //       
            var one=storage.a;
            alert("     ："+one)

            //       
            var two=storage['b']
            alert("     ："+two)

            //       
            var three=storage.getItem('c')
            alert("     ："+three)
            
        } else {
            alert("      localStrorage")
        }
    

　　
上記ではlocalStorageの値の格納と値の取得の3つの方法について説明しましたが、具体的にはどの方法でも構いません.ここで公式に推奨されているのはgetItemsetItemの2つの方法でアクセスします.
 
では、データを保存します.修正したい場合はどうすればいいですか?焦らないで、次のコードを見てください.

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            storage.setItem('a',"  a")
            var before=storage.getItem('a')
            alert("    a："+before)

            storage.setItem('a',"a    ")
            var after=storage.getItem('a')
            alert("     a："+after)
            
        } else {
            alert("      localStrorage")
        }
    

　　
localStorageの削除:
1、localStorageをクリアする:localStorageのclearメソッドを呼び出してlocalStorageのすべての内容をクリアする

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            storage.a="  a"
            storage['b']=100
            storage.setItem('c',"  c")
            alert("    a："+storage.getItem('a'))
            storage.clear()//  localStorage
            alert("    a："+storage.getItem('a'))
            
        } else {
            alert("      localStrorage")
        }
    

　　
2、値の削除:localStorageを呼び出すremoveItem()メソッド値の削除

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            storage.a="  a"
            storage['b']=100
            storage.setItem('c',"  c")
            alert("    a："+storage.getItem('a'))
            storage.removeItem('a')
            alert("    a："+storage.getItem('a'))
            
        } else {
            alert("      localStrorage")
        }
    

　　
localStorageのキー取得

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            storage.a="  a"
            storage['b']=100
            storage.setItem('c',"  c")
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                alert(key);
            }
            
        } else {
            alert("      localStrorage")
        }
    

　　
 
四、localStorageの注意事項:
1、localStorageに格納されているのはStringタイプの値です

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            storage.a=100
            alert(typeof(storage.a))
            
        } else {
            alert("      localStrorage")
        }
    

　　
上記のコード印刷の結果はstringで、intタイプの値を格納していますが、localStorageはstringタイプとして格納しています.
 
2、JSON形式のデータをlocalStorageに保存する必要がある場合は、JSONを借りる必要があります.stringify()という方法で、JSONをJSON文字列に変換します

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            var data={
                name:'xiaowang',
                sex:'man',
                love:'  '
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
            
        } else {
            alert("      localStrorage")
        }
    

　　
読み込み後にJSON文字列をJSONオブジェクトに変換するには、JSONを使用する.parse()メソッド

    
    


     
        if (window.localStorage) {
            var storage=window.localStorage;
            var data={
                name:'xiaowang',
                sex:'man',
                love:'  '
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            var json=storage.getItem('data')
            var jsonObj=JSON.parse(json)
            alert(typeof(jsonObj))//   object
            
        } else {
            alert("      localStrorage")
        }