sessionStorageとlocalStorage

HTML 5のWeb Storageは、sessionStorageとlocalStorageの2つの記憶方式を含む.いずれもクライアントの一時情報を記憶するためのオブジェクトである.いずれも文字列タイプのオブジェクトしか格納できません(仕様では他のオリジナルタイプのオブジェクトを格納できますが、ブラウザでは実装されていません).
sessionStorage:同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納します.したがって、sessionStorageは永続化されたローカルストレージではなく、セッションレベルのストレージにすぎない.
localStorage:アクティブにデータを削除しない限り、永続化されたローカルストレージに使用されます.データは期限切れになりません.
異なるブラウザでは、localStorageまたはsessionStorageの情報を共有できません.同じブラウザの異なるページ間では、同じlocalStorage(ページは同じドメイン名とポートに属する)を共有できますが、異なるページまたはラベルページ間ではsessionStorageの情報を共有できません.ここで、ページおよびラベルページは、トップレベルのウィンドウのみを指し、1つのラベルページに複数のiframeラベルが含まれ、同源ページに属している場合、sessionStorageを共有することができることに注意してください.
同源の判断規則:

http://www.test.com

https://www.test.com(プロトコルが異なるため、異なるソース)

http://my.test.com(ホスト名が異なるため、異なるソース)

http://www.test.com:8080(ポートが異なるため、異なるソース)

web storageとクッキーの違い
Web Storageの概念はクッキーと似ていますが、違いは、より大きな容量のストレージのために設計されていることです.Cookieのサイズは制限されており、新しいページを要求するたびにCookieが送信されます.これにより、帯域幅が無形に浪費されます.また、cookieは役割ドメインを指定する必要があります.ドメイン間で呼び出すことはできません.
このほか、Web StorageにはsettItem、getItem、removeItem、clearなどの方法があり、クッキーのようにフロントエンド開発者がsetCookie、getCookieを自分でカプセル化する必要はありません.
ただし、Cookieも欠かせません.Cookieの役割はサーバとのインタラクションであり、HTTP仕様の一部として存在しますが、Web Storageはローカルでデータを「格納」するためだけに生成されます(@otakustayからの修正)
html 5 web storageのブラウザサポート状況
ブラウザのサポートはIE 7以下がサポートされていないほか、他の標準ブラウザは完全にサポートされている(ieおよびFFはwebサーバで実行する必要がある).IEはいつも良いことをしている.例えば、IE 7、IE 6のUserDataはjavascriptローカルストレージのソリューションである.簡単なコードパッケージにより、すべてのブラウザがweb storageをサポートするように統一できます.
ブラウザがlocalStorageをサポートしているかどうかを判断するには、次のコードを使用します.

if(window.localStorage){
    alert("    localStorage") 
}else{ 
    alert("      localStorage") 
    
} 
//   
if(typeof window.localStorage == 'undefined'){ 
    alert("      localStorage") 
}

localStorageおよびsessionStorageアクション
localStorageとsessionStorageは、setItem、getItem、removeItemなど、同じ操作方法を有します.
localStorageとsessionStorageの方法
setItem格納value
用途:valueをkeyフィールドに格納
用法:.setItem( key, value)
コードの例:

sessionStorage.setItem("key", "value"); 
localStorage.setItem("site", "js8.in");

getItem valueの取得
用途:指定したkeyローカルに格納されている値を取得する
用法:.getItem(key)
コードの例:

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

removeItem削除key
用途:指定したkeyローカルに格納されている値を削除する
用法:.removeItem(key)
コードの例:

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

クリアすべてのkey/valueをクリア
用途:すべてのkey/valueをクリア
用法:.clear()
コード例:js

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

その他の操作方法:ポイント操作と[]操作で記憶する
web Storageは、自身のsetItem、getItemなどでアクセスしやすいだけでなく、普通のオブジェクトのようにポイント(.)を使うこともできます.オペレータ、および[]は、次のコードのようにデータを格納します.

var storage = window.localStorage; 
storage.key1 = "hello";  
storage["key2"] = "world"; 
console.log(storage.key1); 
console.log(storage["key2"]);
// result:storage = Storage {key1: "hello", key2: "world", length: 2}

localStorageとsessionStorageのkeyとlengthプロパティの遍歴sessionStorageおよびlocalStorageによって提供されるkey()およびlengthは、以下のコードのような記憶されたデータの遍歴を容易に実現することができる.

var storage = window.localStorage; 
for (var i=0, len = storage.length; i < len; i++){ 
    var key = storage.key(i); 
    var value = storage.getItem(key); 
    console.log(key + "=" + value); }

storageイベント
storageはstorageイベントも提供し、キー値が変更されたりclearされたりすると、storageイベントをトリガーすることができます.次のコードのようにstorageイベントの変更のリスニングが追加されます.

if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage,false); 
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage); 
} 

function handle_storage(e){ 
    if(!e){
        e=window.event;
    } 
}

Ajaxでの実際の応用例

/**
 *     
 */
function Login() {
    var sysUserData = {};
    sysUserData.userAccount = $("#userAccount").val();
    sysUserData.userPassword = $("#userPassword").val();
    $.ajax({
        type : "POST",
        url : "../api/login",
        data : JSON.stringify(sysUserData),
        dataType : "json",
        contentType : "application/json",
        success : function(successData) {
            console.info(successData);
            if(successData.status == "success"){
                //             sessionStorage       
                sessionStorage.setItem("elder_platform_name", successData.message)
                window.location.href="home"; 
            }else{
                alert("    ！");
            }
        },
        error : function(data) {
            console.info(data);
            alert("    ！");
        }
    });
}