第16章 儲存
16.1 Web Storage
16.1.1 Web Storage 的定義
Web Storage 是一種可以簡單地將 JavaScript 所處理的資料永久儲存的介面。近年來，出現了 Web Storage 等多種客戶端儲存技術。於是，可以不用再像過去那樣必須通過伺服器才能進行資料的讀寫操作。由於這些技術很好地去除了與伺服器的通訊部分，因此人們可以享受到效能的提高、開發手續的削減、離線操作的實現等各個方面的優點。
特別是 Web Storage，它非常容易使用，標準也已經確定，瀏覽器對其的支援情況也較
為完善。從各方面來看，它在 HTML5 相關的 API 中屬於是一種能被用於實際服務中的使用門檻很低的 API，且已經被用於很多服務中。它的功能是極具魅力的，對於初次接觸 HTML5 的人來說，這是一個很好的切入點。
Web Storage 具有以下這些特徵：
- Key-Value 型的簡單的儲存方式；
- 能夠以與普通的 JavaScript 物件相同的方式來進行讀寫操作；
- （與 Cookie 相比）能夠儲存大容量的資料。
不過 Web Storage 並沒有提供諸如建立用於搜尋的下標或進行事務處理等功能。如果需要在客戶端進行功能更復雜的資料管理，則要使用 Indexed Database、Web SQL
Database 或 File Writer API 等方法。
Web Storage 的容量
雖然 Web Storage 的標準中沒有限制其可能的儲存容量，但大部分的瀏覽器都是以
5MB 為上限對該功能進行實現的。儘管在一些瀏覽器中也可以根據使用者設定來更改這一上限，不過對於面向一般使用者公開的 Web 應用程式，還是應該意識到這一限制。
此外，在 Web Storage 中，為每個源準備了共享的儲存空間。即使是不同的服務，只要它們的源是相同的，就能夠共享儲存。因此，有時 1 個服務可以使用的容量將不足5MB，對此請加以注意。
localStorage 與 sessionStorage
Web Storage 的實體是在全域性物件中定義的 localStorage 與 sessionStorage 這兩種物件。只要像通常的物件那樣對其屬性進行讀寫，就能使所儲存的資料在頁面跳轉時也不會丟失。
localStorage 與 sessionStorage 的區別在於資料的生存週期。對於在localStorage中儲存的資料來說，只要沒有被顯式地刪除，即使瀏覽器或計算機執行了重啟，這些資料也不會丟失。而另一方面，在 sessionStorage 中，資料僅能在同一個會話內得以保留。下面簡單總結了 sessionStorage 的生存週期。
共享 sessionStorage 的情況
- 通常的頁面跳轉時
- 在 iframe 內打開了子頁面
- 從奔潰中恢復時
- 重新載入時
沒有共享 sessionStorage 的情況
- 在新視窗或新標籤頁中打開了頁面
- 視窗被關閉後又被重新開啟時
16.1.2 基本操作
本節之後將介紹 Web Storage 的基本操作。這裡所介紹的範例程式碼都是使用的 localStorage，而對於 sessionStorage 的情況，操作方法也是完全相同的。
資料的讀寫
可以通過 setItem 方法將資料儲存至 localStorage，並通過呼叫 getItem 方法來引用資料。此外，Web Storage 也提供了可以對值進行讀寫的語法糖，其操作方法與通常的物件相同。程式碼清單 16.1 是一
個示例。
資料的刪除
可以通過呼叫 removeItem 方法來刪除所儲存的值。此外，Web Storage 也提供了可以對值進行刪除操作的語法糖，其操作方法與通常的物件相同。程式碼清單 16.3 是一個示例。
資料的列舉
可以通過 key 方法與 length 屬性來列舉保存於 Web Storage 中所有的資料。其中 length 是用於引用所儲存的鍵的總數的屬性，而 key 則是用於引用引數所指定的下標的鍵的方法。程式碼清單 16.4 是一個示
例。
16.1.3 storage 事件
在某個視窗中更改了 Web Storage 中的資料之後，將會在除了更改資料的視窗之外所有的視窗中觸發 storage 事件。通過捕捉該 storage 事件並加以適當的處理，就能夠在多個同時開啟的視窗之間確保資料的一致性。
例如，通過在新標籤頁中開啟的設定頁面來更新儲存時，可以通過捕捉並處理 storage 事件以使其他所有標籤頁都能獲知設定的更改並執行 UI 的更新處理，從而避免與儲存資料之間產生不一致。表 16.1 是 storage 事件物件的屬性一覽，而程式碼清單 16.6 則是 storage 事件的使用示例。