【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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


沒有留言: