Follow Fang!: HTML5 localStorage 與 sessionStorage

2013/10/11

HTML5 localStorage 與 sessionStorage

HTML5新增了Web Storage的方法，分別是『localStorage』與『sessionStorage』兩者差異僅在儲存時間長短而已

localStorage：能夠無限期將值儲存在瀏覽器內，除非使用者清除歷史紀錄，否則會一直儲存到瀏覽器的空間之中

sessionStorage：儲存期限僅止於網頁還沒被關閉前都會一直存在，網頁關閉時，會將值刪除

在還沒任何動作之前，我們可以透過瀏覽器的開發工具來查詢目前『localStorage』與『sessionStorage』使用狀況

按鈕未被觸發時，可以得知『localStorage』與『sessionStorage』尚未被使用

按鈕被觸發後，『localStorage』與『sessionStorage』將值紀錄在瀏覽器上

將網頁關閉後，在重新開啟，『localStorage』值還存在，而『sessionStorage』值則被清除了

程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <script type="text/javascript">
   function local () {
    localStorage.tempName="value";
   }

   function session () {
    sessionStorage.tempName="value";
   }
  </script>
 </head>
 <body>
  <button onclick="local ();">Local</button>
  <button onclick="session ();">Session</button>
 </body>
</html>

參考資料：
http://www.w3schools.com/html/html5_webstorage.asp