差分クッキー、のlocalStorage、ののsessionStorage

まず、概念

クッキー
- クッキーとは何ですか - クッキーは、お使いのコンピュータ上のテキストファイルに格納されたデータの一部です。
ローカルストレージ
- 何であるのlocalStorage - のlocalStorageデータは、ブラウザを閉じても、ローカルクライアントのハードウェアに保存されている情報を参照し、情報データも存在します
sessionStorage
- sessionStorageは、セッション内のオブジェクトを参照するので、ブラウザを閉じたときに、のsessionStorage情報も保存されたデータをクリアします - 何のsessionStorageです

第二に、どのように使用する方法（APIおよび一般的な使用法）

クッキー（ルーキーのチュートリアルを参照してくださいhttps://www.runoob.com/js/js-cookies.html

クッキーを作成します。

= document.cookie ' ユーザ名= Doeの' ;     // 基本セット

document.cookie = ' ユーザ名= Doeが;、=木有効期限18は2043年午前12時00分00秒GMT 12月である' ;      // 基本設定の有効期限+（デフォルトのクッキー削除されたブラウザを閉じているとき）

クッキーを読みます

VaRの X = document.cookie;         // クッキーを読みます

クッキーを変更

// キー再割り当てには、例えば、元のユーザー名=ドウ、ジョンに変更することができる 
document.cookie = 「ユーザ名=ジョン」。

クッキーの価値取得機能

関数getCookie（CNAME）{
     VARの名= CNAME + ' = ' 。
    VaRの CA = document.cookie.split（' ; ' ）;
    用（VAR i = 0 ; iはca.lengthを<Iは++ ）{
         VARの C = CA [i]を.trim（）。    // ）（トリム用于除去前后空格
        場合（c.indexOf（名）== 0）リターンc.substring（name.length、c.length）。
     } 
     戻り 「」。
}

クッキーは、有無を検出します

// 私たちは関数がgetCookie（↑クッキーで検出されたものの上に使用することができ、データを持つようにしたいがある場合

、関数checkCookie（）{ 
    VARのユーザ名= getCookie（「ユーザ名」）;
     IF（ユーザ名== 「」）{ 
        アラート（「ご購入いただけますが、」）; 
    } 
    他{ 
        ユーザー名 =プロンプト（' あなたの名前を入力してください：'、'' ）;
         IF（ユーザ名=！'' &&ユーザ名=！ヌル）{ 
            しますsetcookie（' ユーザ名'、ユーザ名、365）; 
        } 
    } 
} 

// 设置クッキー
関数ますsetcookie（キー、値、時間）{
     VARの D = 新しい日付（）; 
    d.setTime（d.getTime（） +（時間* 24 * 60 * 60 * 1000年））。
    varが期限切れになる= ' =有効期限が切れる' + ）（d.toGMTString。
     document.cookie =キー+ ' = ' +値+ " " + 満了します。
}

ローカルストレージ

新しいのlocalStorage

localStorage.setItem（キー、値）。

値のクエリのlocalStorage
```
localStorage.getItem（キー）;
```
クリア1つのlocalStorage
```
localStorage.removeItem（キー）;
```
すべてクリアのlocalStorageを持っています
```
localStorage.clear（）;
```

localStorageのすべてのキーと値を取得する必要があります

関数のgetAll（）{
     VAR valueArr = []; 
　　 VAR keyArr = [];
    用（VAR i = 0 ; I <localStorage.length; iは++ ）{
         VARのキー= localStorage.getKey（I）。
        keyArr.push（キー）; 
        valueArr.push（localStorage.getItem（キー）; 
    } 
    戻りnewArrを; 
}

sessionStorage
- localStorageと一致API

三つの違い、クッキー、のsessionStorage、ののlocalStorage

サイズ
- クッキー約4K、非常に、非常に小さいです。
- sessionStorage和のlocalStorage：5M;
妥当性
- クッキー：使用は、有効期限を設定期限切れ
- sessionStorage：ブラウザが閉じられた空、ライフサイクルは、現在の下で唯一の対話であります
- localStorage：手動で空になっていないが永遠に、ライフサイクルをクリアされません。
サーバーへのデータのでしょう
- クッキー：必要ありません、それは帯域幅を無駄にしても、サーバーにあなたが訪問するたびにクッキーが送信されます
- sessionStorageとのlocalStorage：なし転送

-------------------------------------------------- -------------------------------------------------- -----------分割ライン------------------------------------- -------------------------------------------------- ------------------------

少しT ^ Tを言います

XSS攻撃のクッキーを防ぐ方法

XSSは、HTMLに埋め込まれた攻撃者JSスクリプトは、HTTPヘッダー内のSet-Cookieの必要性と相まって、これらの攻撃を、軽減するために返されます。

HttpOnlyの：彼はクッキーにアクセスするには、JavaScriptのスクリプトを禁止するので、この属性は、XSSを防ぐことができます

確保：この属性は、クッキーを送信するためにブラウザに指示する場合にのみ、HTTPSへの要求

XSS（2019年9月12日）を防止するためにどのように穴、クッキーの詳細を掘ります

差分クッキー、のlocalStorage、ののsessionStorage

おすすめ