ページ

Monday, March 29, 2010

localStorage vs sessionStorage in WebStorage

I checked out localStorage and sessionStorage.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Web Storage Test</title>
</head>
<body onload="showAll()">
<h1>Web Storage Test</h1>
<hr width="90%" align="left">
<h2>Local Storage</h2>
Key:<input id="key1" type="text"> Value:<input id="value1" type="text">
<button onclick="save1()">Save</button>
<br />
List:<select id="entries1" size="1" onchange="onEntrySelected1()"></select> <button onclick="remove1

()">Remove</button>
<button onclick="removeAll1()">Remove All</button>
<br />

<hr width="90%" align="left">

<h2>Session Storage</h2>
Key:<input id="key2" type="text"> Value:<input id="value2" type="text">
<button onclick="save2()">Save</button>
<br />
List:<select id="entries2" onchange="onEntrySelected2()"></select> <button onclick="remove2()">Remove</button>
<button onclick="removeAll2()">Remove All</button>
<br />

<hr width="90%" align="left">

<button onclick="window.open(location.href);">window.open</button>

<script type="text/javascript">
<!--

var key1 = document.getElementById("key1");
var value1 = document.getElementById("value1");
var key2 = document.getElementById("key2");
var value2 = document.getElementById("value2");
var entries1 = document.getElementById("entries1");
var entries2 = document.getElementById("entries2");

if (window.addEventListener)
{
    window.addEventListener("storage", showAll, false);
}
else if (window.attachEvent)
{
    //window.attachEvent("storage", showAll);
    document.write('<button onclick="window.location.reload();">Reload</button>');
}
else
{
    document.write('<button onclick="window.location.reload();">Reload</button>');
}


function showAll()
{
    entries1.innerHTML = "";
    entries2.innerHTML = "";
    for(var i=0; i<localStorage.length; i++)
    {
        var k = localStorage.key(i);
        entries1.options[entries1.options.length] = new Option(k+":"+localStorage[k], k);
        if(localStorage.length == 1)
        {
            key1.value = k;
            value1.value = localStorage[k];
        }
    }
    for(var j=0; j<sessionStorage.length; j++)
    {
        var k = sessionStorage.key(j);
        entries2.options[entries2.options.length] = new Option(k+":"+sessionStorage[k], k);
        if(sessionStorage.length == 1)
        {
            key2.value = k;
            value2.value = sessionStorage[k];
        }
    }
}

function save1()
{
    localStorage[key1.value] = value1.value;
}

function remove1()
{
    delete localStorage[key1.value];
}

function removeAll1()
{
    localStorage.clear();
}

function onEntrySelected1()
{
    var selectedOption = entries1.options[entries1.selectedIndex];
    key1.value = selectedOption.value;
    value1.value = localStorage[selectedOption.value];
}

function save2()
{
    sessionStorage[key2.value] = value2.value;
}

function remove2()
{
    delete sessionStorage[key2.value];
}

function removeAll2()
{
    sessionStorage.clear();
}

function onEntrySelected2()
{
    var selectedOption = entries2.options[entries2.selectedIndex];
    key2.value = selectedOption.value;
    value2.value = sessionStorage[selectedOption.value];
}
-->
</script>

</body>
</html>






Open another New Window



localStorage is useful for Offline Web Application or something.
Posted by
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)