Webクライアントのいくつかのストレージ方式

一般的なブラウザ・エンド・ストレージ・テクノロジーは、次のとおりです.
cookie    sessionStorage    localStorage     userData     indexDB
サーバ・エンド・ストレージ・テクノロジー:
session
一、HTML 5 webストレージ(WebStorage)
HTML 5は、ユーザーのブラウズデータをローカルに格納し、サーバに格納せず、Webサイトのパフォーマンスに影響を与えることなく大量のデータを格納することができます.これらのデータは、ユーザーがWebサイトのデータを要求するためにのみ使用されます.
データはキー/値のペアで存在します.サーバと対話する必要のないデータを格納
クライアントが一時データを格納する2つのオブジェクト:localStorage sessionStorage
1、localStorage:時間制限のないストレージ(ブラウザを閉じ、再度ブラウザを開くと、格納されたデータは依然として存在する)
2、sessionStorage:1つのsessionに対するデータストレージ(ブラウザウィンドウを閉じ、格納されたデータをクリアし、すなわちウィンドウを閉じて再びブラウザデータをクリアした)に対して、前進、後退、リフレッシュデータは依然として存在する
3、いずれも文字列タイプのオブジェクトしか保存できない
4、いずれもクライアントの一時情報を格納するためのオブジェクトである
5、異なるブラウザはsessionStorage、localStorageの情報を共有できない.
同じブラウザの異なるページはlocalStorageの情報(プロトコル、ドメイン名、ポート)を共有することができます.でもsessionStorageはダメ
localStorage sessionStorageの使い方は同じです
1、記憶変数
  sessionStorage.setItem('key','value');//key-は格納する変数名、value-は変数の値です
   localStorage.setItem('key','item');
2、変数の値を取得する
  sessionStorage.getItem('key');//key-は格納されている変数名です
   localStorage.getItem('key');
3、指定した変数を削除する
   sessionStorage.removeItem('key');
    localStorage.remove('key');
4、ローカルに保存されているすべての情報を削除する
    sessionStorage.clear();
    localStorage.clear();
5.現在格納されているキー値ペアの数を取得する
   localStorage.length;
   sessionStorage.length;
注意:localStorageに格納される値は文字列形式のみです.格納されたデータが参照オブジェクトである場合、オブジェクトのtoStringメソッドがデフォルトで呼び出され、文字列が格納されます.配列を格納する場合、格納されたデータ項目は「,」で区切られ、解析する場合は配列に分解して操作する必要があります.オブジェクトにはJSONが必要です.stringifyは記憶に変換し、データを取得してJSONを用いる.parseオブジェクトへの変換
1、配列:

localStorage.setItem('testArr',[1,2,3]);
console.log('    ：'，localStorage.getItem('testArr'));
//          
console.log('        :',localStorage.getItem('testArr').split(',')[0]);

結果が表示されます.

    ：1,2,3,4
        ：1

、対象

var data = {
      'a':2,
      'b':3
};

var dataStr = JSON.stringify(data);
//      
localStorage.setItem('testObj',data);
console.log('      ：'，localStorage.getItem('testObj'));
//        
localStorage.setItem('test_obj',dataStr);
console.log('       ：'，localStorage.getItem('test_obj'));

//      

var data = JSOPN.parse(localStorage.getItem('test_obj');

console.log('      ：',data);

：

：

      ：[object object]
       ：{"a":2,"b":3}
      ：object{a:2,b:3}

、cookie

H5 ，cookie ，cookie 4KB ， ， 。cookie expire 。

：

//  cookie，name- Cookie    ，value-    ，days-   
function setCookie(name, value, days) {
    days = days || 30;           //       ，      30 
    var exp = new Date();        //      
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); //      
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
}
//  cookie
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;

}
//  cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
}

  、

1、 cookie:
： ，
： 4KB
： HTTP ， Cookie
： ， Cookie

2、sessionStorage
： ，
： 5MB
： （ ），
： ， ， Object  Array

3、localStorage
： ，
： 5MB
： （ ），
： ， ， Object  Array

、
Cookie：
localStorage： ，
sessionStorage:



、  application cache
， ， ，      （manifest file）, ，