cookie、local Strageとsession Strageの詳細

フロントエンドローカル記憶
現在のフロントエンドのローカルストレージは、以下の3つの方法があります.

クッキー

local Strage

session Strage

ここでもう一度はっきりとこの中の知識点を記録します.
クッキーcookieは、documentオブジェクトのcookie属性をJavaScriptに提供するブラウザが提供する仕組みである.JavaScriptによって制御されてもよく、JavaScript自体の性質ではない.Cookieは「甜餅」という意味で、W3C組織によって提案され、最初にNetscapeコミュニティによって発展した仕組みです.現在はCookieが標準となり、すべての主流ブラウザはIE、Netscape、Firefox、OperaなどCookieをサポートしています.HTTPは無状態のプロトコルであるため、サーバ単体はネットワーク接続からクライアントのアイデンティティを知ることができない.どうすればいいですか?クライアントに通行証を発行しましょう.一人ずつ、誰が訪問しても自分の通行証を携帯しなければなりません.このようにサーバーは通行証からお客様の身分を確認できます.これはCookieの仕事の原理です.Cookieは、実際には短いテキスト情報である.クライアント要求サーバは、サーバがユーザ状態を記録する必要がある場合、レスポンスを使用してクライアントブラウザにCookieを発行する.クライアントブラウザはCookieを保存します.ブラウザがウェブサイトを再要求すると、ブラウザは要求されたURLをCookieと一緒にサーバに提出する.サーバは、Cookieをチェックして、ユーザの状態を認識する.サーバは、必要に応じてCookieの内容を変更することもできる.
注意:cookieはドメインをまたぐことができないが、同じトップドメインの二次ドメイン名については、'domain'を設定する方法でドメインをまたぐことができる.
一部のCookieは制限があります.時間制限を超えると、システムによって削除されます.Cookieがユーザーの情報を漏らすのではないかと心配する人が多い.しかし、これは余分であり、Cookieはドメインをまたぐことによって訪問することができません.またいくつかのオブジェクトはCookieを離れて実現することができません.例えばSession.ここでもう一つのポイントがあります.クライアントのCookieの数は最大300個で、それぞれ4 kbを超えてはいけません.ウェブサイトごとに設定されているクッキーの数は20個を超えてはいけません.
読み取りcookiecookieの読み取りについて、最も基本的なものはdocument.cookieである.以下の点に注意してください.

cookieは同じドメインに対して、同じドメインのcookieこそ相互接続である.

は、一般的に、サーバ動作domainだけが必要な安全を保証することができる.しかし、時には、フロントエンドの添削が必要かもしれません.cookie、この時、私たちの主役が現れました.Cookieは、Cookie HTTP応答ヘッダファイルに含まれる追加フラグである.HttpOnlyを生成する際にHttpOnlyフラグを使用すると、保護されたクッキーにクライアントスクリプトがアクセスするリスクを低減する(ブラウザがサポートする場合).Set-Cookieオプションがcookieに設定されている場合、このHttpOnlyはサーバー側でしか変更できません.Jsは操作できません.Cookieにとって透明な

です.

HttpOnly = trueが取得した文字列は、「Cookieと書くと、すべての種類の値が強制的に文字列に変換される」という文字列であり、document.cookieは、現在の領域におけるすべての読み取り可能なdocument.cookieが、「cookie」という形で接続され、中間にdocument.cookieのセミコロンを使用して分離される.【cookie】key=valueには標準文字列があるので、;は_app=qunar; _user=cwj; _test=sbsbが存在しない.

書き込みcookiekey/valueは、サービス端末によって設定されてもよく、フロントエンドによって書き込みされてもよい.書き込みの内容はほぼ同じですが、書き込みの仕方は少し違っています.最大の違いは、サービス端末が / これを設定して、クライアントの修正を制限することができることである.
クライアントの書き込み:

document.cookie = newCookie;

cookieはキーペアの形式の文字列である.注意したいのは、この方法では1つのクッキーのみを設定または更新することができます.以下のオプションのクッキー属性値はキーのペアの後に、クッキーの設定/更新を具体化するために使用されます.セミコロンを使ってセミコロンを作成します.

;path=path (   '/', '/mydir')       ，            。
;domain=domain (   'example.com'， '.example.com' (       ),'subdomain.example.com')       ，                 。
;max-age=max-age-in-seconds (     60*60*24*365),     expires     ；
;expires=date-in-GMTString-format       ，cookie       【        】  ，        Date.toUTCString() 
;secure (cookie   https    )

cookieの値文字列は、コンマ、セミコロン、またはスペースを含まないことを保証するために、encodeURIComponent(cookie値でこれらの値を使用禁止)を使用することができます.
なお、cookieを削除したい場合は、有効期限を設定することにより、現在の時刻より前の「expires」またはmax-ageが0になるだけです.
local Strage'HttpOnly'は、ローカルストレージnewCookieの新しい技術であり、cookieに比べて、その記憶容量は大きく、一般的にはlocalStorageは数Kしかない.先端の開発に便利をもたらしましたが、実際に使ってみると、そんなに簡単ではないことが分かります.いくつかの特徴があります.

永久保存の単一ドメイン名の記憶量は比較的に大きい(推奨5 MBは、各ブラウザによって異なります).全体の数は制限がありません.

ブラウザが閉じられます.クリアされません.ページ間で共有が可能です.同じドメイン名で共有を実現し、【トップドメインと二級/三級ドメインは共有しない】

クリアしない限り.ローカルで永久に保存できます.

簡単な読み取り方法:

myStorage = localStorage;

Strageを返します.現在のリモート端末のローカル記憶空間にアクセスするためのオブジェクトは、「記憶されているキーパッドペアとレングス属性が含まれています.」
読み込み中に異常に戻ることがあります.SecurityErr
要求はポリシーステートメントに違反しているか、または遠端がa valid scheme/host/port tupleではないか(例えば、origginがfileを使用している場合:またはdata:形式が発生する可能性がある).例えば、ユーザは、指定されたorignにデータを残すことを許可するブラウザの設定を無効にすることができる.
使い方HTML5は現在5つのAPIがあります.

cookie/推奨キーキーに従って値vakueを読み取る方法

cookie/推奨の一キー値ペアを書き込む方法

localStorage/推奨のキーキーキーに従って、あるキー値ペア

を削除します.

localStorage.getItem(key)/クリア

localStorage.setItem(key, value)/インデックス値に基づいて対応するkey

を返します.
実はlocalStorage.removeItem(key)は、JavaScriptのオブジェクトのように使用することができます.

localStorage.a、localStorage.['a']   localStorage.getItem(a)     ，       
localStorage.a = 'aaa'、localStorage.['a']='aaa'   localStorage.setItem('a','aaa')     ，       

注意:local Strageは現在は格納文字列のみをサポートしており、他のフォーマットはすべて文字列に変換されて記憶されています.他のものを保存するにはJSON.parse/JSON.stingifyの配合を考慮して使用することができます.
session StragelocalStorage.clear()属性は、アクセスを許可します.localStorage.key(index)オブジェクトです.これとlocalStorage似ていますが、違いはここです.sessionStorageに格納されているデータは有効期限が過ぎていません.session Storage内のデータは、ページセッション終了時に消去されます.
ページセッションは、ブラウザが開いている間は維持されていますが、ページを再読み込みまたは再開しても元のページセッションを維持します.新しいタブまたはウィンドウでページを開くと新しいセッションが初期化されます.localStorageの運転方式は違っています.
注意すべきことはlocalStorageですかsessionStorageに保存されているデータは、いずれもこのページのプロトコルに限定される.
使用方法は完全に session cookiesと同じです.いずれもWeb Strage APIのインターフェースで実現されます.
Web Strage APIのインターフェースとして、Strageは特定のドメイン名にアクセスするセッションストアを提供しています.localStorage)またはローカル記憶( sessionStorage)の機能は、例えば、記憶されているデータ項目を追加、修正、削除することができる.
ドメイン名のセッションストアを操作したい場合(localStorage)は、Window.session Strageを使用することができます.ドメイン名のローカルストレージを操作したい場合(session storage)は、Window.local Strageを使用することができます.
注意:local storageとは、存在時間のみを区別して、現在のページを更新して復元すると、session storageは元のままになりますが、新規ページは新しいlocal storageを初期化します.