クッキー
HTTPはステートレスなプロトコルであるため、クライアントとサーバーのデータ交換が完了すると、それは再び要求を切断し、再接続、ネットワーク接続から、単一のサーバーは、ユーザーの身元を知る方法はありません。このクッキーが発生する問題を解決するものであり、毎回新しいユーザーの要求は、サーバーが訪問したユーザー知っているように、あなたは、自分のIDカードを持参しなければならない、ユーザーに次の訪問によって発行された一意のIDカードを与えます、異なるユーザのために、クッキーが（4Kまで）小さなテキストファイルで異なる応答、ブラウザはユーザーのマシンに保存されています。一部のサーバーには、クッキーは、ユーザーID情報の役割を識別するために使用することができ、それが適切なクッキーを送信する、情報、各サイトの要求を格納する必要があります。
クッキーの属性フィールド
| 小道具 | イントロ |
|---|---|
| 名 | クッキーの名前 |
| 値 | Cookieの値 |
| ドメイン | ドメインはクッキーにアクセスすることができます |
| パス | ページは、このクッキーのパスにアクセスすることができます |
| 有効期限が切れる/マックスエイジ | クッキーの有効時間 |
| サイズ | クッキーのサイズ |
| HTTPのみ | JSは、クッキー情報を読み取ることができます |
| 確保します | この規定は、クッキーhttpsを通過させることができるかどうか |
Stringにクッキーがプレーンテキストで保存され、そのクッキーのデータ型
|
1
2
3
|
document.cookie =
'name=userInfo'
;
// 设置cookie的name属性
document.cookie =
'username=Jack'
;
// 在cookie中存储了username信息
console.log(document.cookie);
// name=userInfo; username=Jack
|
|
1
2
3
|
document.cookie =
'name=userInfo'
;
// 设置cookie的name属性
document.cookie =
'username=Amy'
;
// 在cookie中存储了username信息
console.log(document.cookie);
// name=userInfo; username=Amy
|
クッキーの割り当ては、等号の前に属性名の値は、プロパティ名、後続のセットのために同じカバレッジの同じ、唯一の元の値である場合には、クッキーの元の値を上書きしないことですときは、上記の例で知ることができます。むしろのみセミコロンより、クッキーは、セミコロンとスペースで区切られた2つのフィールド間であることに注意してください
クッキーが非自己定義されたプロパティフィールドを与えるために提供されている場合、あなたは文字列の追加の実施形態に必要
例えば
|
1
2
|
let expireDate =
new
Date();
document.cookie +=
";expires="
+ expireDate.toString();
|
注意： 「; =有効期限」セミコロンを持っている必要があります、フィールドの前にいないセミコロンが、これはカスタムフィールドであると思われる場合は
ドメイン
そのような二、三のドメイン名、ドメイン名、唯一のトップレベルドメインにドメインクッキーの設定、または二、三のドメイン名、ドメイン名自体のような非トップレベルドメインは、クッキーは、そうでなければ生成できない、クッキー他のセカンダリドメイン名を設定することはできません。
トップレベルドメインのみがトップレベルドメインのドメインを設定することができ、2人のドメイン名を設定または3人のドメイン名、そうでない場合はクッキーを生成することができないことはできません。
セカンダリドメインは、ドメインがトップレベルドメインや独自のクッキーに設定されて読み取ることができ、クッキーは、他の2つのドメイン名のドメインを読み取ることができません。だから、複数のクッキーセカンダリドメイン名間で共有されるように、ドメインは、トップレベルドメインに対して設定する必要がありますようにすることができます内側またはCookieの値に全ての第2レベルドメイン。
唯一のドメインに入ることができ、トップレベルドメインは、クッキーのトップレベルドメインに設定され、他のドメインが取得されていないセカンダリドメイン名に設定されています。
全体的に、Cookieドメイン名にアクセスすることはできません高い下位ドメインは、ドメイン名を読み取ることができクッキー自体は下位と優れたドメイン名、ドメイン名は、同じレベルのクッキーが同じレベルドメイン名であること、相互に互いのクッキーにアクセスすることはできません共有していません独自のCookieへのアクセス。
パス
パスフィールドは、このクッキーにページのパスにアクセスすることができます。例えば、ドメインは、パスは/テストされ、その後、/テストパスの下のページのみがこのクッキーを読むことができるabc.comです。
有効期限が切れる/マックスエイジ
/マックス・エイジフィールドがこのクッキーのタイムアウトのために設定されている有効期限が切れます。設定時間の値であれば、この時間に達すると、このクッキーの失敗。このフィールドが設定されていない場合、デフォルト値は、セッションはブラウザが閉じているときには、ある、ある（注：いないブラウザタブが、ブラウザ全体）、このクッキーの失敗。
|
1
2
|
let expireDate =
new
Date(
"2019-5-26T09:00:00"
);
document.cookie +=
";expires="
+ expireDate.toString();
|
クッキーを削除するには、その後、クッキーへのエントリーは、時間に現在の時間の前に期限が切れる設定しました
|
1
2
|
let expireDate =
new
Date(
"1970-01-01T00:00:00"
);
document.cookie +=
";expires="
+ expireDate.toString();
|
サイズ
サイズフィールドこのクッキーの大きさ。
HTTPのみ
このプロパティがtrueの場合、これだけのクッキーについての情報をHTTPリクエストヘッダにはなりますが、document.cookieに、このクッキーにアクセスすることはできません、XSS攻撃されるリスクを減らすことがtrueに設定されています
確保します
エントリーのクッキーを確保するためのフィールドは、HTTPSのみで配信されることができるかどうか
localStorageを/のsessionStorage
クッキーを交換するが、Web開発を補うためにないwebstorage、ストレージ内のクッキーの上限（最大4Kの記憶容量）、セキュリティ（HTTPプロトコルでクリアテキスト）提案の欠点
どちらのAPIは同じです
| 関数 | イントロ |
|---|---|
| SetItem関数（キー、値） | キーと値のペアの形でデータの一部を保存 |
| getItem（キー） | 値を取得するための鍵 |
| removeItem（キー） | キーに従ってデータを削除するには |
| キー（インデックス） | インデックスキーの名前を取得します。 |
| クリア（） | すべてのデータを削除します。 |
lengthプロパティの両方
|
1
2
3
4
5
6
7
8
9
|
sessionStorage.setItem(
"name"
,
"Jack"
);
sessionStorage.setItem(
"phone"
,
"18856894523"
);
console.log(sessionStorage.getItem(
'name'
));
// Jack
console.log(sessionStorage.key(0));
// name
console.log(sessionStorage.length);
// 2
sessionStorage.removeItem(
'phone'
);
console.log(sessionStorage.length);
// 1
sessionStorage.clear();
console.log(sessionStorage.length);
// 0
|
両者の比較
- localStorageとのsessionStorageは、一時的にクライアント情報をオブジェクトを格納するために使用されています。唯一の目的は、明細書には、他のネイティブ型のオブジェクトを格納することができますが、文字列型に保存されているが、これまでのところ、そのブラウザを達成されていません。
- ユーザーは、そうでない場合は、この情報が常に存在します、ブラウザによって提供さのlocalStorage情報をクリアするには、UIに表示されていない場合のlocalStorageのライフサイクルは、永久的です。
- 現在のウィンドウやタブののsessionStorageのライフサイクル、ウィンドウまたはタブが永久的に閉じられると、のsessionStorage格納されたデータが消去されました。
- 異なるブラウザはのlocalStorageに情報またはのsessionStorageを共有することはできません。
- 同じブラウザ（同じドメイン名とポートに属しているページ）の異なるページが同じ部屋を共有することができるのlocalStorage
- 不同页面或标签页间无法共享sessionStorage的信息。注意，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且属于同源页面，那么他们之间是可以共享sessionStorage的。
- 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
cookie 与 webstorage的区别
存储限制
- 每个domain中只能存储最多20条cookie，cookie数据不能超过4K
- webStorage也有存储大小的限制，但是比cookie大得多，可以达到5M或更大
数据的有效期
- sessionStorage：仅在当前的浏览器窗口关闭有效；
- localStorage：始终有效，除非用户手动删除
- cookie：cookie过期时间之前一直有效，即使窗口和浏览器关闭
作用域
- sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；
- localStorage：同源窗口共享
- cookie：同源窗口共享