Cookieとweb Storage

友达は面接に行って、帰ってきて私に普通のページの间でどんな方法を使うかを闻いて、私は普通3种类の1、QueryString 2、cookies 3、webStorageを使うと言っています.
QueryStringは簡単で、URLの後ろにパラメータをつなぐことですが、送信された値がブラウザのアドレスバーに表示され、オブジェクトが伝達されず、簡単で安全性の要求が低い整数値だけを伝達するのに適しているという欠点があります.今日は主にcookiesとwebStorageを比較します.

 、cookie     
cookies              ,cookie      （path）   ，    cookie        ，           。
// cookie
    function writeCookie(name, value, hours, path) {
        var expire = "";
        if (hours !== null) {
            expire = new Date((new Date()).getTime() + hours * 3600000);
            expire = "; expires=" + expire.toGMTString();
        }
        path = path ? "; path=" + path : "";
        document.cookie = name + "=" + encodeURIComponent(value) + expire + path;
    };

//  cookie
    tools.readCookie = function (name) {
        var cookieValue = "";
        var search = name + "=";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search);
            if (offset != -1) {
                offset += search.length;
                end = document.cookie.indexOf(";", offset);
                if (end == -1) end = document.cookie.length;
                cookieValue = decodeURIComponent(document.cookie.substring(offset, end));
            }
        }
        return cookieValue;
    };

二、web Storagehtml 5のWeb Storageには、sessionStorageとlocalStorageの2つのストレージ方式が含まれている.注意:storageには文字列のデータしか保存できませんが、JSでよく使われる配列やオブジェクトには直接保存できません.両者の実現方法は同じである.
1、.setItem(key,value)はvalueを格納し、valueはkeyフィールドに格納します.

sessionStorage.setItem("key", "test");
localStorage.setItem("site", "segmentFault");

2、.getItem(key)valueを取得し、指定したkeyがローカルに格納した値を取得する

var value = sessionStorage.getItem("key");     
var site = localStorage.getItem("site");

3、.removeItem(key)keyを削除し、指定したkeyがローカルに格納されている値を削除します.

sessionStorage.removeItem("key");     localStorage.removeItem("site");

4、.clear()すべてのkey/valueをクリア

sessionStorage.clear();
localStorage.clear();

上記の実装方法の山は、今ではそれらの違いを言うことができます.共通点:ブラウザ側に保存され、同源です.違い:1、cookies(1)ookieデータは常に同源のhttpリクエストに携帯され、すなわちcookieはブラウザとサーバの間で往復伝達される.(2)クッキーデータパス(path)の概念は,クッキーがあるパスの下にのみ属することを制限することができる.(3)格納サイズの制限も異なり,クッキーデータは4 kを超えてはならないとともに,httpリクエストのたびにクッキーを携帯するため,クッキーは小さなデータを保存するのに適している.(4)ウィンドウやブラウザが閉じていても、設定したクッキーの有効期限が切れるまで有効である.(5)クッキーもすべての同源ウィンドウで共有されている.
Web Storageはブラウザからのリクエストによりサーバにデータを渡す必要がないので、クッキーよりも多くのデータを格納できるのは5 M程度です.2、LocalStorage(1)localStorageはすべての同源ウィンドウで共有されている.(2)手動で削除しない限り、ウィンドウまたはブラウザを閉じても常に有効であり、永続的なデータとして使用される.3、sessionStorage(1)ユーザーの一時セッションデータを保存し、ブラウザを閉じるとすべてのデータが消えます.(2)sessionStorageは異なるブラウザウィンドウで共有されない