WebフロントエンドストレージのセッションストレージとlocalStorage

ブラウザでは、Web Storageを使用してキー値を格納すると、クッキーを格納する方法よりも直感的で、容量が大きくなります.localStorageとsessionStorageの2つが含まれています.

sessionStorage(一時記憶):各データソースの記憶領域を維持し、ブラウザのこのラベルページが開いている間に存在し、このラベルページを含むページが

を再ロードする.

localStorage(長期ストレージ):sessionStorageと同じですが、ブラウザが閉じた後も

のデータは存在します.

localStorageとsessionStorageのストレージデータサイズは、一般的に5 MB

です.
 
使用方法説明:sessionStorageとlocalStorageの使用方法はほぼ一致しており、参照タイプの値はJSONに変換して記憶する必要がある
 
1.ローカルにデータを保存
　　

    let obj = {
        name: 'xiaoming',
        age: 18,
        birthday: '2000-01-01',
    }

    sessionStorage.setItem('userInfo', JSON.stringify(obj))

    localStorage.setItem('userInfo', JSON.stringify(obj))

注意:2回目に格納されたkey値が1回目に格納されたkey値と同じ場合、1回目の値は上書きされます.
 
2.ローカルからデータを読み込む
 

let obj1 = JSON.parse(sessionStorage.getItem('userInfo'))

let obj2 = JSON.parse(localStorage.getItem('userInfo'))

 
3.指定したキー値をローカルから削除する
 

sessionStorage.removeItem('userInfo')

localStorage.removeItem('userInfo')

 
4.保管されているすべての値をクリア
 

sessionStorage.clear()

localStorage.clear()