HTMLの研究ノート（7）のWebストレージ

ウェブストレージは、特に二つのタイプに分け、ユーザーがブラウザにデータを保存することができ、1がのlocalStorageで、一つはあるのsessionStorage

次のようにクライアントのストレージのために、同様のも早いクッキーがまだ広く使用されているがあり、それらの間の違いは次のとおりです。

	クッキー	ローカルストレージ	sessionStorage
サーバーとの通信	各要求は実行されます	サーバーと通信しません。	サーバーと通信しません。
データのライフサイクル	有効期限が有効に設定する前に	常設、イニシアチブない限り削除します	実際には、ブラウザが閉じられるまで
スコープデータ	ドメイン名とそのサブドメインを設定します	相同性は、すべてのウィンドウ間で共有さ	異なるウィンドウ間で共有することはできません
保存されたデータサイズ	通常、これ以上の4キロバイト以下	一般的には5メガバイト程度	一般的には5メガバイト程度

ウェブストレージAPIは、継承されたwindowオブジェクト、および2つの新しいプロパティを提供し、window.localStorageそしてwindow.sessionStorage

共通のプロパティとメソッドを次のように

length：ストライプの数を保存
setItem(key, value)：セーブデータ
getItem(key)：指定されたデータを取得します。
removeItem(ket)：指定されたデータを削除します
clear()：すべてのデータを削除します。
key(index)：インデックスキーを取得します。

if (window.localStorage) {
    var storage = window.localStorage
    storage.setItem('username', 'admin')
    storage.setItem('password', '12345')
    let username = storage.getItem('username')
    let password = storage.getItem('password')
    console.log(username) // admin
    console.log(password) // 12345
    console.log(storage.length) // 2
    storage.removeItem('password')
    console.log(storage.length) // 1
    storage.clear()
}

クッキーとセッションの知識を追加するための最後の方法

私たちは、HTTPプロトコルがステートレスである、知っている、それぞれの要求が出されたことを手段が独立している、この時間は、それは不便の多くの原因となります

例えば、ユーザーは、彼が別の要求を送信したため、サーバはまだユーザーのIDを認識しない、一つのリクエストにログインした後

セッションクッキーと情報の出現は、多くの時間がユーザの要求を識別するように、ユーザーの身元を記録することです

：次のようにクッキーの運転メカニズム

応答でのサーバーset-cookieのヘッドは、ブラウザのクッキーの設定が必要です
ブラウザがクッキーの使用をサポートしている場合、応答を受信した後、ブラウザは、その後、クッキーはファイルに保存されます
後続の各ブラウザの要求はによって要求されますcookie、テープヘッドのクッキー情報
サーバが要求を受信した後、ユーザのクッキー情報を識別するために応じて

セッションの操作機構次のとおりです。

サーバーは、一意のIDを作成し、このIDに保存し、対応するセッション情報、および、ブラウザのアイデンティティに送信しました

一般的な3つの方法でセッション情報を保存するものがメモリに格納され、1が1がデータベースに保存され、ファイルに保存されます
このブラウザの識別を受信すると、後続の各要求に、識別子がもたらします

一般的な二つを持参する方法を特定し、1がクッキーに装着され、一つがURLパラメータに取り付けられています。
サーバは、対応するアイデンティティを見つけるために、ユーザセッションを識別するための識別情報に基づいて、要求を受信します

ブラウザ上のクッキーに格納されたデータは、セッションデータは、セッションの比較的安全に使用して、サーバーに保存されています

ただし、サーバーに保存されてあまりにも多くのセッションデータは、サーバーのパフォーマンスに影響を与えることができ、選択肢を比較検討する必要があります

[記事の続きを読むHTMLシリーズ、見HTMLの研究ノート ]

HTMLの研究ノート（7）のWebストレージ

おすすめ