[HTML5 上級パート 1] Web ストレージ - cookie、localStorage、sessionStorage

1. データストレージ

1.1 クッキー

1.1.1 概念の紹介

ネットワーク機能を使用する場合、HTTP プロトコルというプロトコルが必要です。ただし、HTTP プロトコルはステートレスであるため、接続後に切断され、ユーザー情報は記録されません。このとき、クッキーという概念を導入しました。

ネイティブ JavaScipt 事例集
JavaScript + DOM
JavaScript の基礎 基礎から上級まで
キャンバス ゲーム開発

Cookie は、ユーザーを識別し、セッションを追跡するために、Web サイトによってユーザーのローカル端末に保存されるデータです。Cookie はデフォルトで HTTP プロトコルで伝送されます。次のような特徴があります。

• 保存されるデータは文字列形式のみです。
• 同じドメイン名で保存されるファイルのサイズは通常 4KB、数は 50 です。
• 適時性。一定期間が経過すると Cookie が破棄されます。有効期間が最も短いのはブラウザを閉じたときで、Cookie は破棄されます。
• セキュリティ確保のため、同一プロトコル、同一ドメイン名、同一ポートという同一オリジンポリシーを採用しており、この条件下でのみ読み取りが可能です。

次に、Cookie の動作を簡単に紹介します。

• Cookie には名前と値を設定する必要があります。
• Cookie のドメイン、つまりドメイン名は通常、ドメインのデフォルト設定を使用します。
• Cookie のパスを設定します。
• Cookie の有効期限、つまり Cookie の有効期限を設定します。

1.1.2 保管と取り出し

Cookie 形式: キー = 値

Cookie を表示する: ブラウザを開いて、アドレス バーまたはコンソールの前にある感嘆符を使用して [アプリケーション] に切り替え、[Cookie] を見つけてクリックします。

Cookie の設定と読み取り:

//创建或修改cookie
document.cookie = "name = Jack"; 

//创建变量接收读取到的cookie值，并打印
var getCookie = document.cookie;  
console.log(getCookie); 

//通过添加expires设置过期时间	
document.cookie = "name=;expires=Thu, 01 Jan 1970 00:00:00 GMT";

注: 1. Cookie 設定の有効期限はサーバー時間に基づいており、ブラウザーがサーバーから HTTP 応答ヘッダーを取得した後、ブラウザーの時間はサーバーと同期されます。

  2. 使用new Date() 获取的本地时间并不准确，与服务器相差很大。本地时间可被客户修改，如果cookie使用本地时间可被人利用实现永久免登陆验4

クッキーの使用:

添加cookie：document.cookie = “key=value”; // 一次写入一个键值对
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
//在浏览器中查看一下现在的cookie是什么样子   打开控制台 点击application 就能看到cookies
//注意 document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加

读取cookie：document.cookie;

document.cookie // "test1=hello; test2=world"
上面代码从document.cookie一次性读出两个 Cookie，它们之间使用 分号空格 分隔。必须手动还原，才能取出每一个 Cookie 的值。

var cookies = document.cookie.split('; ');

for (var i = 0; i < cookies.length; i++) { 
      console.log(cookies[i]);
}
// foo=bar// baz=bar

修改cookie：document.cookie = “key=value”;  // 修改名为key的cookie值

document.cookie = 'test2=hah';
document.cookie // "test1=hello; test2=hah"

上面代码修改了test2对应的值

失效时间：expires ，没有设置失效时间的cookie 在浏览器关闭以后就会自动删除，如果设置了失效时候在未来的时间，就可以让cookie保存的时间长一点
设置失效时间：document.cookie = “key=value;expires=”+ oDate;

var oDate = new Date();
oDate.setDate(oDate.getDate() + 7);
document.cookie = “key=value;expires=”+ oDate;
//上面代码设置cookie的过期时间为7天以后

删除cookie：将cookie值覆盖为空，并将失效时间设置为过去的时间。

var oDate = new Date();
oDate.setDate(oDate.getDate() -7);
document.cookie = “test=;expires=”+ oDate;
//将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到

1.1.3 メソッドのカプセル化

function setCookie(name,value,n){
	var oDate = new Date();
	oDate.setDate(oDate.getDate()+n);
	document.cookie = name+"="+value+";expires="+oDate;
}

function getCookie(name){
	var str = document.cookie;
	var arr = str.split("; ");
	for(var i = 0; i < arr.length; i++){
		//console.log(arr[i]);
		var newArr = arr[i].split("=");
		if(newArr[0]==name){
			return newArr[1];
		}
	}
}

function removeCookie(name){
	setCookie(name,1,-1);
}

1.1.4 概要

上記からわかるように、Cookie はサーバーのリクエストごとに渡され、非常に遅く非効率になるため、大量のデータを保存するのには適していません。

HTML5 では、クライアント側でデータを保存する 2 つの新しい方法が提供されています。

• localStorage 時間制限のないデータ ストレージ
• sessionStorage はセッションのデータ ストレージです。

どちらのデータもサーバー リクエストごとに渡されるわけではなく、リクエストされた場合にのみ使用されるため、Web サイトのパフォーマンスに影響を与えることなく大量のデータを保存できます。

データは Web サイトごとに異なる領域に保存され、Web サイトは独自のデータのみにアクセスできます。

1.2 ローカルストレージとセッションストレージ

1.2.1 概要

localStorage永続レベルのストレージ。このドメイン名の任意のページに再度アクセスする限り、データを抽出できます。ブラウザがアンインストールされない限り、データはそこに残ります。もちろん、手動でデータを削除することもできます。

sessionStorageセッションレベルのストレージ。現在のページ内でのみ有効で、ページを閉じるとデータが破棄され、ページ間でアクセスできなくなります。

ブラウザ内の場所:

注: 1. localStorage と sessionStorage は使用方法がまったく同じです。つまり、同じ API を持っています。違いは上で述べたとおりです

2. ローカルストレージのデータ形式 JSON文字列（Key-Value形式）

1.2.2 データを操作するためのプロパティまたはメソッド

H5 は、localstorage のプロパティとメソッドを次のようにカプセル化しています。

• localstorage.length 現在保存されているキーと値のペアの数を取得します
• localstorage.key(n) は、n 番目の項目のキー値を取得します
• localstorage.setItem(key,value) は、対応するキーと値のペアを設定します
• localstorage.getItem(key) キー値に対応するデータを取得します
• localstorage.removeItem(key) は特定のデータをクリアします
• localstorage.clear() は保存されているデータをすべてクリアします

上記の H5 カプセル化メソッドを使用して localStorage を設定および取得することに加えて、ドット (.) 演算子または [] を使用して、通常のオブジェクトと同様にデータを設定および取得することもできます。

// 以animal名字将json串catStr存储到localStorage中   	  
localStorage.animal = catStr;
localStorage["animal"] = catStr;

1.2.3 ケース - アンケートの送信

コード例:

<h1>新型肺炎防治知识试题</h1>
<form>
    <div>
        <h3>Q1：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
        <div><input type="radio" name="q1">早发现、早报告、早诊断、早治疗</div>
        <div><input type="radio" name="q1">早发现、早报告、早诊断、早转院、早治疗</div>
        <div><input type="radio" name="q1">早发现、早诊断、早隔离、早治疗</div>
        <div><input type="radio" name="q1">早发现、早报告、早诊断、早治疗</div>
    </div>
    <div>
        <h3>Q2：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
        <div><input type="radio" name="q2">早发现、早报告、早诊断、早治疗</div>
        <div><input type="radio" name="q2">早发现、早报告、早诊断、早转院、早治疗</div>
        <div><input type="radio" name="q2">早发现、早诊断、早隔离、早治疗</div>
        <div><input type="radio" name="q2">早发现、早报告、早诊断、早治疗</div>
    </div>
    <div>
        <h3>Q3：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
        <div><input type="radio" name="q3">早发现、早报告、早诊断、早治疗</div>
        <div><input type="radio" name="q3">早发现、早报告、早诊断、早转院、早治疗</div>
        <div><input type="radio" name="q3">早发现、早诊断、早隔离、早治疗</div>
        <div><input type="radio" name="q3">早发现、早报告、早诊断、早治疗</div>
    </div>
    <div>
        <h3>Q4：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
        <div><input type="radio" name="q4">早发现、早报告、早诊断、早治疗</div>
        <div><input type="radio" name="q4">早发现、早报告、早诊断、早转院、早治疗</div>
        <div><input type="radio" name="q4">早发现、早诊断、早隔离、早治疗</div>
        <div><input type="radio" name="q4">早发现、早报告、早诊断、早治疗</div>
    </div>
    <div>
        <h3>Q5：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
        <div><input type="radio" name="q5">早发现、早报告、早诊断、早治疗</div>
        <div><input type="radio" name="q5">早发现、早报告、早诊断、早转院、早治疗</div>
        <div><input type="radio" name="q5">早发现、早诊断、早隔离、早治疗</div>
        <div><input type="radio" name="q5">早发现、早报告、早诊断、早治疗</div>
    </div>
    <input type="submit" value="提交">
</form>
<script>
    var form = document.querySelector("form");

    form.onsubmit = function(){
        if(localStorage.submit){
            alert("不能重复提交");
        }else{
            localStorage.submit = true;
            alert("表单成功提交...")
        }
    }
</script>

1.2.4 Web ストレージによってもたらされる利点

• ネットワーク トラフィックの削減: データがローカルに保存されると、サーバーからのデータ要求を回避できるため、不必要なデータ要求が減り、ブラウザとサーバーの間で行われる不必要なデータ転送が削減されます。

• データを素早く表示: パフォーマンスが良く、ネットワーク経由でサーバーからデータを取得するよりもローカルでのデータの読み取りがはるかに速く、ローカルのデータを瞬時に取得できます。また、Webページそのものをキャッシュすることもできるので、ページ全体とデータがローカルにあればすぐに表示することができます。

• 一時ストレージ: データはユーザーが一連のページを閲覧している間のみ使用する必要があり、ウィンドウを閉じた後にデータを破棄できることが多いため、この場合、sessionStorage が非常に便利です。

付録：

1. HTML5が提供するデータ永続化技術（オフラインストレージ）

• アプリケーション キャッシュ: アプリケーションに必要なファイルのローカル キャッシュ (アプリケーション自体を保存してもデータは保存されません)
• LocalStorage と SessionStorage は、データをキーと値のペア (JSON 文字列) 形式で保存します
• Web SQL リレーショナル データベース、SQL ステートメントを通じてアクセス
• IndexDB インデックス データベース

2. アプリケーションキャッシュ

• ケースのリンク: http:// m.ftchinese.com/phone.html
• アプリケーションテクノロジ: アプリケーションキャッシュ、LocalStorage、Web SQL
• アプリケーション キャッシュ キー: マニフェスト ファイル (アプリケーションに必要なファイルのリスト)
• アプリケーション キャッシュの特徴: マニフェスト ファイルは変更された場合にのみ更新されます。次回有効にするためには、マニフェスト内のすべてのファイルを一度更新する必要があります (更新はタイムリーではありません)