html 5ローカルストレージ(Web Storage API)

1.ブラウザは5-10 Mのコンテンツを保存することができ、従来のcookie 4 kよりずっと容量が高く、ドメイン名ごとに5 M
2.localStorage.setItem ([string]key, [string]value);//localStorageオブジェクトのsetItemメソッドでキー/値を格納します.キー/値は文字列のみで、数値やオブジェクトは直接格納できません.
3.    var sticky = localStorage.getItem("sticky_0");//getItemメソッド抽出値alert(sticky);
4.APIは広くサポートされており、IE 8でも使用できます.ブラウザがlocalStorageをサポートしているかどうかをテストし、windowグローバルオブジェクトにlocalStorage属性があるかどうかを確認します.
if (window ["localStorage"])
{//code here }  
5.数字の記憶、直接localStorage.setItem ("numitems", 1) ; jsはデフォルト1が文字列で、値を取るときにparseInt()またはparseFloat()関数で数値変換されます.
var numItems = parseInt(localStorage.getItem("numitems"));
6.localStorageの配列書き方は、setItemやgetItemを使わずに配列と見なすことができます.
localStorage["key1"] = "value1";
var sticky = localStorage["key1"];
7.localStorageのlengthメソッドとkeyメソッドの使用:
    for (var i = 0; i < localStorage.length; i++)     {         var key = localStorage.key(i);         var value = localStorage[key];         alert(value);     }
for inループも使用できます
    for (var key in localStorage )
    { var value = localStorage[key]; }
8.データの消去clear(); 
9.各ブラウザのデバッグツールは、resourceでlocalStorageが編集および削除できるのを見ることができます.
10.同じドメイン名のkeyの混同を避けるために、同じクラスのkeyに配列を作成することができます.完全なコードを参照してください.
11.任意のjsオブジェクトと配列を格納し、JSONのstringifyとparseメソッドで文字列とjsオブジェクト/配列の変換を行うことができる
12.localStorageを削除します.remove(key) , 
13.sessionStorageセッションストレージはlocalStorageと同じですが、一時的に使用され、ブラウザを閉じると消去されます.
完全なコード

window.onload = init;
localStorage.setItem("sticky_0", "Pick up dry cleaning");
localStorage.setItem("sticky_1", "Cancel cable tv, who needs it now?");
function init()
{
    var button = document.getElementById("add_button");
    button.onclick = createSticky;
    var stickiesArray = getStickiesArray();


    for (var i = 0; i < stickiesArray.length; i++)
    {
        var key = stickiesArray(i);
        var value = localStorage[key];
        addStickyToDom(value);
    }
}


function addStickyToDom (value)
{
    var stickies = document.getElementById("stickies");
    var sticky = document.createElement("li");
    var span = document.createElement("span");
    span.setAttribute("class", "sticky");
    span.innerHTML = value;
    sticky.appendChild(span);
    stickies.appendChild(sticky);
}


function createSticky()
{
    var stickiesArray = getStickiesArray();
    var currentDate = new Date();
    var time = currentDate.getTime();
    var key = "sticky_" + time;
    var value = document.getElementById("note_text").value;
    localStorage.setItem(key, value);
    stickiesArray.push(key);
    localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
    addStickyToDom(value);
}


function getStickiesArray ()
{
    var stickiesArray = localStorage.getItem("stickiesArray");
    if (!stickiesArray)
    {
        stickiesArray = [];
        localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
    }
    else
    {
        stickiesArray = JSON.parse(stickiesArray);
    }
    return stickiesArray;
}
/**
 * Created by andrewlee on 13-11-11.
 */