ローカルストレージlocalStorageの使い方のまとめ

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

 localStorage.clear()    // undefined     
 localStorage            //Storage {length: 0}     

ストレージデータ

localStorage.setItem("name","caibin") //     name  caibin   
localStorage.name = "caibin"; //          
localStorage // Storage{name: "caibin", length: 1}     

データの読み込み

localStorage.getItem("name") //caibin,     localStorage     name     
localStorage.name // "caibin"
localStorage.valueOf() //     localStorage      
localStorage.key(0) //            (  )
//     localStorage        
for(var i=0; ilength;i++){
    console.log('localStorage     '+i+'       ：'+localStorage.key(i)+',  ：'+localStorage.getItem(localStorage.key(i)));
}

変数の削除

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0}          name     localStorage    

localStorageに変数が保存されているかどうかを確認します

//          ，         ，  demo ～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

配列をローカル文字列に変換

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

JSONをlocalStorageに格納

var students = {
    xiaomin: {
        name: "xiaoming",
        grade: 1
    },
    teemo: {
        name: "teemo",
        grade: 3
    }
}

students = JSON.stringify(students);  // JSON          
console.log(students);
localStorage.setItem("students",students);//     localStorage 

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //  JSON
console.log(newStudents); //