LocalStorage是什麼？

年初時，剛好有貴人委託進行一個案子，
案主的Request是不使用資料庫，
在Client端使用jSON與LocalStorage完全模擬會員註冊，購物的功能...
在網路上到處找資料，發現中文對於這方面的Spec.真的很少。
案子早就已經結束了，但第一次碰到這樣的需求，是難得的經驗。
個人感覺滿好玩的，所以在這邊紀錄一下一些用法，免得自己也忘了。
PS.這是找尋國外網站的各個零碎的資料，
然後用我自認為的MVC模式架構來開發程式，
也許您有更好的方法，可以跟我說喔。

圖片來源Designed by Freepik 

首先來了解一下什麼是LocalStorage

What is HTML Local Storage?
With local storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request.
Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

另外當然也有sessionStorage

What is HTML sessionStorage?
The sessionStorage object is equal to the localStorage object,
except that it stores the data for only one session.

The data is deleted when the user closes the specific browser tab.

基本上兩個是一樣的東西，都類似存在Client的cookie，
但Local Storages最大能除存5MB的資料，而且不影響Server效能，僅存在Client端。
不過當你關閉瀏覽器時，sessionStorage的生命週期也結束了。
但Local Storages必須透過指令清除。
存取LocalStorage的指令如下

// Store
localStorage.setItem("lastname", "Smith");
// get
var get = localStorage.getItem("lastname");
// Remove
localStorage.removeItem("lastname");

我們可以透過以下的程式碼，知道使用者端的瀏覽器到底能不能支援Local Storages，
基本上Chrome 4.0, IE 8.0及FireFox 3.5之後的版本都能支援。

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

我們可以使用Chrome瀏覽器，按下F12來查看Local Storage如何變化。