localStorage && sessionStorage

localStorage&&sessionStorage
概要
html 5のweb Storageには、sessionStorageとlocalStorageの2つのストレージ方式が含まれています.

sessionStorageは、同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納するために使用されます.

localStorageは、ドメイン名の下に永続的にローカルに存在する必要があるデータを格納するために使用され、これらのデータが削除されるまでアクセスすることができる.

したがって、sessionStorageとlocalStorageの主な違いは、データを格納するライフサイクルです.sessionStorageに格納されているデータのライフサイクルはセッションですが、localStorageに格納されているデータのライフサイクルは、アクティブに削除されるまで永続的です.そうしないと、データは期限切れになりません.
区別する
同じ点

localStroageとsessionStroageは似たような

です.
異なる点

ライフサイクルは異なり、localStroageのライフサイクルは永続的であり、データはlocalStorageで無期限に保存することができる.セッションStroageのライフサイクルはセッションであり、セッションの終了時にセッションStorageに保存されているデータ

が消去されます.
API

localStorage.getItem()
localStorage.setItem()
localStorage.removeItem()
localStorage.clear()

sessionStorage.getItem()
sessionStorage.setItem()
localStorage.removeItem()
localStorage.clear()

example

キー値ペア:localStorage.setItem(key,value)setItem()は、値valueをキーキーキーに格納するために使用されます.setItem()のほか、localStorageも使用できます.key=valueまたはlocalStorage['key']=valueの2つの形式.また、key値とvalue値は文字列形式でなければならず、文字列でなければ対応するtoString()メソッドが呼び出されて文字列再記憶に変換されます.オブジェクトを格納する場合は、まずJSON形式などの認識可能な文字列フォーマットに変換して格納する必要があります.

    localStorage.setItem('name','linjianran')
    //localStorage.name = 'linjianran'
    //localStorage['name'] = 'linjianran'
    //        user   
    localStorage.setItem('user', JSON.stringify(id:1,name:'linjianran'))

キー値:localStorage.getItem(key)getItem()は、キーキーキーに対応するデータを取得するために使用されます.getItem()はsetItem()と同様にgetItem()にも2つの等価形式value=localStorageがある.keyとvalue=localStorage['key'].取得したvalue値は文字列タイプであり、他のタイプが必要な場合は手動でタイプ変換します.

    let name = localStorage.getItem('name')
    //let name = localStorage.name
    //let name = localStorage['name']
    //     user     
    let user = JSON.parse(localStorage.getItem('user'));

キー値ペアを削除する:localStorage.removeItem(key)removeItem()は、指定したキーのアイテムを削除するために使用されます.localStorageにはデータの期限切れの概念はありません.すべてのデータが期限切れになった場合、開発者が手動で削除する必要があります.

let name = localStorage.getItem('name') //'linjianran'
localStorage.removeItem('name')
name = localStroage.getItem('name') //null

すべてのキー値ペア:localStorageをクリアします.clear()は、格納されているすべてのコンテンツを削除するために使用されます.clear()とremoveItem()の違いはremoveItem()が削除したものであり、clear()がすべて削除したものである.

localStorage.clear()
let length = localStorage.length // 0

localStorageのプロパティ名(キー名):localStorageを取得します.key(index)key()は、指定したインデックスのキー名を取得するために使用されます.付与された値はいずれもキー値に対応するインデックス値に影響を及ぼさず、インデックス値のキー値名は昇順に並べられ、key()はlocalStorageに格納されているキー値を巡回するために使用できます.

localStorage.setItem('aKey1','aValue')
localStorage.key(0) // aKey1
localStorage.setItem('bKey','bValue')
localStorage.key(1) // bKey
localStorage.setItem('aKey2','aValue')
localStorage.key(0) // aKey1
localStorage.key(1) // aKey2
localStorage.key(2) // bKey

loaclStorageに保存するキー値ペアの数:localStorage.length lengthプロパティlocalStorageのキー値ペアの数

を取得するために使用する.

localStorage.setItem('aKey1','aValue')
localStorage.length // 1
localStorage.setItem('bKey','bValue')
localStorage.length // 2

次の例では、テキスト入力ボックスの内容が自動的に保存され、ブラウザが偶然にリフレッシュされた場合、テキスト入力ボックスの内容が復元されるため、書き込まれた内容が失われません.

//       
let field = document.getElementById('field')

//      autosave  
//(                 )
if (sessionStorage.getItem('autosave')) {
    //          
    field.value = sessionStorage.getItem('autosave')
}

//         change   
field.addEventListener("change",function() {
    //       sessionStorage    
    sessionStorage.setItem('autosave', field.value)
})

Web Storageイベント

storageイベント格納されたデータが変化するとstorageイベントがトリガーされます.しかし、clickクラスとは異なるイベントはイベントのキャプチャとバブルを起こし、storageイベントは通知のようにキャンセルできないことに注意してください.このイベントをトリガーすると、同ドメインの他のウィンドウのstorageイベントが呼び出されますが、storageをトリガーするウィンドウ(現在のウィンドウ)はこのイベントをトリガーしません.storageのeventオブジェクトの一般的なプロパティは、

です.

  oldValue：     。        ，      null。
  newValue：     。       ，      null。
  url：    storage          。
  key：  store key 

    function storageChanged() {
        console.log(arguments);
    }

    window.addEventListener('storage', storageChanged, false);