<h1>localStorage with json</h1>
<input type="text" id="NameValue" placeholder="請輸入要儲存的姓名"></input>
<input type="text" id="TelValue" placeholder="請輸入要儲存的電話"></input>
<button onclick="doSave();">儲存</button>
<button onclick="doGet();">取得</button>
<button onclick="doRemove();">移除</button>
function getTestValue(){ 
    return JSON.parse(window.localStorage.getItem("test"));
}
function setTestValue(value){
 window.localStorage.setItem("test",JSON.stringify(value));
}
function removeTestValue(){
    window.localStorage.removeItem("test");
}

function doSave(){
  var name=$("#NameValue").val();
  var tel=$('#TelValue').val();
  var dataObject={"name":name,"tel":tel};
  setTestValue(dataObject);
}
function doGet(){
  var dataObject=getTestValue();
  alert("Name:"+dataObject.name+"\r"+
        "tel:"+dataObject.tel);
}
function doRemove(){
  removeTestValue();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js