JavaScript高度なプログラミングクライアントストレージ学習メモ_JavaScriptスキル

第 19 章 クライアントストレージ
1. Cookie
①は元々、クライアント側でセッション情報を保存するために使用されていました。
1.1 制限事項
①Cookieはその性質上、特定のドメイン名にバインドされます。 Cookie が設定されている場合、この Cookie は、それが作成されたドメイン名にリクエストを送信するときに組み込まれます。
②Cookie の制限:
□IE6 以前のバージョンでは、ドメイン名ごとに最大 20 個の Cookie が制限されます。
□IE7 以降のバージョンでは、ドメイン名ごとに最大 50 個の Cookie があります。
□Firefox 50
□Opera 50
□Safari と Chrome には厳格なルールはありません
③Cookie サイズ制限: 4096 バイト (プラスまたはマイナス 1) の長さ制限。各 Cookie を個別に制限するのではなく、ドメイン内のすべての Cookie のサイズを制限します。
1.2 Cookie の構成要素
名前、値、ドメイン、パス、有効期限、セキュリティ フラグ。
1.3 JavaScript の Cookie
JavaScript は、BOM の document.cookie 属性を通じて Cookie を操作します。
①属性の取得に使用される場合、 document.cookie は、現在のページで利用可能なすべての Cookie の文字列 (セミコロンで区切られた一連の名前と値のペア) を返します。
name1=value;name2=value2;name3=value3
すべての名前と値は URL エンコードされているため、decodeURIComponent() を使用してデコードする必要があります。
②値の設定に使用すると、document.cookie 属性に新しい Cookie 文字列を設定できます。 document.cookie を設定しても、Cookie 名がすでに存在しない限り、Cookie は上書きされません。設定する前に encodeURIComponent() でエンコードする必要があります。
③Cookieを直接削除する方法はありません。同じパス、ドメイン、セキュリティ オプションを使用し、有効期限を過去に設定して、Cookie を再度設定する必要があります。
□cookie の読み取り、書き込み、ダウンロード関数:
var CookieUtil = {
get : function(name){
var cookieName = encodeURIComponent(name) "=、
cookieStart = document. cookie.indexOf(cookieName),
cookieValue = null;
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart)
if (cookieEnd = = -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart cookieName.length,cookieEnd));
return cookieValue;
},
set : function(名前, 値, 有効期限, パス, ドメイン, セキュア){
var cookieText = encodeURIComponent(name) "= encodeURIComponent(value);期限切れインスタンスの日付){
cookieText = ";expires="期限切れ.toGMTString();
}
if(path){
cookieText = "; path=" path; 🎜>if(ドメイン){
cookieText = "; ドメイン = ドミアン;
}
if(secure){
cookieText = "; secure";
ドキュメント。 cookie = cookieText;
},
unset : function(名前, パス, ドメイン, セキュア){
this.set(名前, "", 新しい日付(0), パス, ドメイン, セキュア);
}
};
1.4 サブ Cookie
① サブ Cookie は、より小さなデータを 1 つの Cookie に保存します。つまり、Cookie 値を使用して、複数の名前と値のペアを保存します。
name=name1=value1&name2=value2&name3=value3
□操作子cookie，get、getAll、set、setAll、unset、unsetAll：
var subCookieUtil = {
get : function(name, subName) {
var subCookies = this.getAll(name);
if(subCookies){
return subCookies[subName];
}else{
null を返します。
}
},
getAll : function(name){
var cookieName = encodeURIComponent(name) "=,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null、
結果 = {};
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart cookieName.length,cookieEnd);
if(cookieValue.length > 0){
var subCookies = cookieValue.split("&");
for(var i=0, len=subCookies.length; ivar Parts = subCookies[i].split("=");
結果[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
結果を返します。
}
}
null を返します。
},
Set : function(name, subName, value, Expires, path, domain, secure){
Var subCookies = this.getAll(name) || {};
サブクッキー[subName] = 値;
This.setAll(名前、サブクッキー、有効期限、パス、ドメイン、安全);
},
setAll : function(name, サブクッキー, 有効期限, パス, ドメイン, セキュア){
var cookieText = encodeURIComponent(name) "=;
var subcookieParts = new Array();
for(サブクッキーのvar subName){
if(subName.length>0 && subcookies.hasOwnProperty(subName)){
subcookieParts.push(encodeURIComponent(subName) "=" encodeURIComponent(subcookies[subName] ));
}
}
if(cookieParts.length>0){
cookieText = subcookieParts.join("&");
if(expiresinstanceofDate){
cookieText = ";expires=expires.toGMTString();
}
if(path){
cookieText = ";path=" パス;
}
if(ドメイン){
cookieText = ";path" パス;
}
if(secure){
cookieText = ";secure";
}
}else{
cookieText = ";expires=" (new Date(0)).toGMTString();
}
document.cookie = cookieText;
},
unset : function(name, subName, path, domain, secure){
var subcookies = this.getAll(name);
if(subcookies){
サブクッキー[subName]を削除します。
this.setAll(名前、サブクッキー、null、パス、ドメイン、セキュア);
}
},
unsetAll : function(名前, パス, ドメイン, セキュア){
this.setAll(名前, null, 新しい日付(0), パス, ドメイン, セキュア);
}
}
2.IE 用户データ（不太实用、略之）
3.DOM 保存储机制
①DOM 保存储两个目标
□ 提供一种在Cookie之
□ 会議に存在するデータを大量に保存できる機構を提供します。
②サポート状況:
□Firefox2 の一部サポート
□IE8、Safari3.1、Chrome1 .0 、Firefox3.1 ですべて実現。
3.1 保存タイプ
①ストレージ タイプは、(ブラウザのため) の名前を最大限に保存するために使用されます。
□clear(): すべての値を削除します。
□getItem(name): 指定された名前名に基づいて、対応する値を取得します。
□key(index): 指定された数字の位置にあるその位置を取得します。
□removeItem(name): 名前名で指定された名前の値を削除します。
□setItem(name, value): 指定された名前名に 1 つの値を設定します。
3.2 sessionStorage オブジェクト
①sessionStorage オブジェクトは、特定のセッションに限定されたデータを保存します。つまり、データはデバイスの一時保存にのみ保存されます。sessionStorage に保存されたデータは、新規に存在することができます。 ②sessionStorage オブジェクトは特定のサーバー セッションに固定されているため、ファイルが実際に実行されているときは使用できません。sessionStorage にデータを保存できるのは、最初にオブジェクトにデータが保存されている面だけであり、複数の面に制限されています。ストレージタイプの例。
3.3 globalStorage オブジェクト
① Firefox2 でのみ実行されます。データを会議全体に保存し、特定の制限があります。
// データを保存します
globalStorage["wrox.com" ].name = "ニコラス";
//获取データベース
var name = globalStorage["wrox.com"].name;
3.4 localStorage オブジェクト
①localStorage ではいかなるアクセス許可も指定できません。同じ localStorage オブジェクトにアクセスできるようにするには、ページが同じドメイン名 (サブドメイン名なし) からのものである必要があり、同じバージョンのトークンを使用する必要があります。
② データは JavaScript によって削除されるか、ユーザーの削除によって保存されます。
使用例:
localStorage.setItema("name","Nicholas");
localStorage.book = "Profession JavaScript";
var name = localStorage.getItem("name"); 🎜 >var book = localStorage.book;
③globalStorage と互換性があります:
function getLocalStorage(){
if(typeof localStorage == "object"){
return localStorage>}else if; ( typeof globalStorage == "object"){
retrun globalStorage[location,host];
}else{
throw new Error("no localstorage");
3.5 StorageItem タイプ
①Storage オブジェクトに格納されるすべてのアイテムは、StorageItem
□value 属性: 格納される値のインスタンスです。
□secure 属性: スクリプトが HTTPS プロトコルを使用してページにアクセスする場合にのみ設定できます。 https 経由でのアクセスのデフォルトは true です。
3.6 ストレージ イベント
ストレージ オブジェクトを変更すると、ドキュメント上でストレージ イベントがトリガーされます。そのイベントオブジェクトeventには次の属性があります:
□domain: 変更が行われるストレージのドメイン名。
□key: 設定または削除するキー名。
□newValue: キーに設定する値、または削除された場合は null。
□oldValue: 変更前の値。
3.7 制限
DOM ストレージの制限はブラウザーにも関係します。