Web Storage:資料存取操作

Web Storage

在以下的兩個文字方塊中,分別輸入 key/value 資料,按一下「儲存」按鈕,即可將這一組資料儲存至 Storage 中。

/

重複輸入不同的資料,可以分別儲存至 Storage 中。你可以透過Chorme 的開發人員工具檢視儲存的資料,直接按下 Ctrl+Shift+I 即可開啟此面板,選取 Resources 頁籤,展開左邊中的 Local Storage (此範例是 Local Storage)或是 Session Storage 節點,可以看到上述範例的設定已經出現在其中,例如以下的截圖,其中儲存了 K1/VALUE1 這一組資料,顯示在面板右邊對應清單中。


如果是 Firefox ,同樣的展開開發人員工具,於主控台輸入 inspect(localStorage) ,即可開啟檢視視窗如下:


若要將某組資料取出,在以下的文字方塊中輸入key值,按一下「取出」按鈕即可。


建立本篇文章需要的功能,需要程式碼列舉如下:

document.getElementById('write').addEventListener('click', function () {
    var key=document.getElementById('key').value  ;
    var value =document.getElementById('value').value  ;
    localStorage.setItem(key,value)  ;
    alert('DONE !') ;
},false);

document.getElementById('read').addEventListener('click', function () {
    var key=document.getElementById('gkey').value  ;   
    alert(localStorage.getItem(key))  ;   
},false);

儲存按鈕為 write ,取出按鈕為 read,儲存資料調用 setItem() 方法,取出資料則調用 getItem() 即可。

Web Storage


沒有留言: