jQuery-button

by jmchen

HTML

<div>
    <button id="setValueBtn">
        Set Value
    </button>
    
    <button id="getValueBtn">
        Get Value
    </button>
</div>

=================
<br>
    
<div>
    <button id="setObjectBtn">
        Set Object
    </button>
    
    <button id="getObjectBtn">
        Get Object
    </button>
</div>
================= 
    <br>
    
<div>
    <button id="clear">
        Clear Local Storage
    </button>
    
    <button id="refresh">
        Reload Page
    </button>
</div>

JavaScript

$("#setValueBtn").click(function(){
    localStorage.setItem("myVal", "Left");
});

$("#getValueBtn").click(function(){
    var val = localStorage.getItem("myVal");
    alert(val);
});


$("#setObjectBtn").click(function(){
    var obj = {};
    obj.foo = 1;
    obj.bar = "bar";
    obj.ary = [1, 2, 3];
    var objStr = JSON.stringify(obj);
    localStorage.setItem("myObj", objStr);
});

$("#getObjectBtn").click(function(){
    var objStr = localStorage.getItem("myObj");
    var obj = null;
    try{
        obj = JSON.parse(objStr);
        alert(obj.bar);
    }catch(e){
        //throw a exception if parse null to json
        alert(objStr);
    }
});


$("#clear").click(function(){
    localStorage.removeItem("myVal");
    localStorage.removeItem("myObj");
    
    //clear all records
    //localStorage.clear();
});

$("#refresh").click(function(){
    window.location.reload();
});