localStorage Test Functions

This function uses the localStorage method to save/modify key/value pair data to the browser..

by someprimetime

HTML

<h3>Adding 3 items:</h3>
<div id="box1" class="box"></div>
<h3>Remove 1 item:</h3>
<div id="box2" class="box"></div>
<h3>Clearing all items:</h3>
<div id="box3" class="box"></div>

CSS

div.box
{
    width:300px;
    height:100px;  
    background-color:#efefef;
    text-align:center;
    margin:5px;
    padding:5px;
}

JavaScript

var objBox1 = document.id('box1');
var objBox2 = document.id('box2');
var objBox3 = document.id('box3');
var myObject = {
    "foo": "bar",
    "abc": "def"
};

localStorage.setItem("test1", "barsadfdsafadsf");
localStorage["test2"] = "bar";
localStorage["test3"] = JSON.encode(myObject);

objBox1.set('html', "test1: " + localStorage.getItem("test1") + "<br/>test2: " + localStorage.getItem("test2") + "<br/>test3: " + localStorage.getItem("test3"));

localStorage.removeItem("test2");

objBox2.set('html', "test1: " + localStorage.getItem("test1") + "<br/>test2: " + localStorage.getItem("test2") + "<br/>test3: " + localStorage.getItem("test3"));

localStorage.clear();

objBox3.set('html', "test1: " + localStorage.getItem("test1") + "<br/>test2: " + localStorage.getItem("test2") + "<br/>test3: " + localStorage.getItem("test3"));