sessionStorage簡介
最近瀏覽器發展中最有趣的部分之一是客戶端數據存儲選項數量的爆炸式增長。在去年之前，我們唯一可行的在客戶端存儲數據的跨瀏覽器方法是 cookie。 Cookie 的缺點是為服務器請求和響應增加了額外的開銷，但它們確實可以完成工作。 HTML 5 為客戶端數據存儲引入了三個新選項：sessionStorage , localStorage 和客戶端數據庫。前兩個，sessionStorage 和 localStorage , 此後被拆分為單獨的 Web 存儲規範，而客戶端數據庫則包含在 Web 數據庫規範中。在這三個新的客戶端數據存儲選項中，我發現 sessionStorage 最有趣的。
什麼是 sessionStorage？
sessionStorage 對像作為 window 的屬性存在 支持瀏覽器（當前為 Firefox 3+、Safari 4+ 和 Internet Explorer 8+）中的對象。您可以將數據放到 sessionStorage 對象，並且只要該窗口（或選項卡）打開，該數據就會持續存在。即使您離開存儲數據的頁面然後導航回來，數據也會保存到 sessionStorage 仍然可用。 sessionStorage 中存儲的任何數據 與保存信息的頁面的協議、主機名和端口相關聯，並且只有共享相同協議、主機名和端口的頁面以後才能訪問該數據。
讓事情變得更有趣，sessionStorage 對特定窗口或選項卡是唯一的（規範稱為“頂級瀏覽上下文”）。例如，假設您打開 Yahoo!在瀏覽器的兩個不同選項卡中發送郵件，應用程序將一些數據保存在 sessionStorage 中 .即使協議、主機名和端口完全相同，第二個選項卡也無法訪問第一個選項卡中的數據。
數據存儲到 sessionStorage 保存在鍵值對中，鍵和值都是字符串。非字符串值在存儲前會自動轉換成字符串。
sessionStorage中的數據 一旦窗口或選項卡關閉，或者用戶請求瀏覽器這樣做，就會刪除。這種行為與將數據綁定到特定窗口或選項卡相結合，可確保數據不會意外暴露或無限期存儲。
用法
sessionStorage 對像有五個方法：
getItem(key)– 檢索給定鍵的值，如果鍵不存在，則檢索 null。setItem(key, value)– 設置給定鍵的值。removeItem(key)– 完全刪除密鑰。key(position)– 返回給定數字位置的值的鍵。clear()– 刪除所有鍵值對。
還有一個屬性，length ，表示sessionStorage中當前存儲了多少鍵值對 .一些示例用法：
//save a value
sessionStorage.setItem("name", "Nicholas");
//retrieve item
var name = sessionStorage.getItem("name");
//get the key name for the first item
var key = sessionStorage.key(0);
//remove the key
sessionStorage.removeItem(key);
//check how many key-value pairs are present
var count = sessionStorage.length;
此外，適當的實現允許您從 sessionStorage 讀取、寫入和刪除值 好像它是一個普通的物體。例如：
//save a value
sessionStorage.name = "Nicholas";
//retrieve item
var name = sessionStorage.name;
//remove the key
delete sessionStorage.name;
這種語法在邏輯上是受支持的，因為這是 JavaScript 通常訪問對象的方式。
寫入 sessionStorage 時 ，可能會拋出錯誤以指示寫入失敗。寫入可能由於多種原因而失敗，但最常見的是已達到最大數據大小。如果您將大量數據保存到 sessionStorage ，最好用 try-catch 包裝任何寫入 來處理這個錯誤。
存儲事件
每當對 sessionStorage 進行更改時 , 一個 storage 在 document 上觸發事件 目的。此事件的事件對象包含以下屬性：
key– 已更改的密鑰。oldValue– 操作前的值。newValue– 運算後的值。url– 執行操作的頁面的 URL。source– 代表sessionStorage所有者的窗口對象 對象。
規範不清楚是否應該為 sessionStorage 觸發此事件 或不。我的測試表明 Internet Explorer 觸發了 sessionStorage 的事件 但 Firefox 和 Safari 沒有。如果有人有其他細節，請插話。
瀏覽器差異
即使 sessionStorage 在包括 Firefox 3、Safari 4 和 Internet Explorer 8 在內的瀏覽器中得到了相當好的支持，但在實現上存在一些差異需要注意：
- Firefox 3 從
sessionStorage讀取值時返回一個對象 .該對像有一個名為value的屬性 包含存儲的實際字符串值。 Firefox 3.5 在檢索值時正確返回字符串。 - Firefox 3 沒有實現
clear()方法; Firefox 3.5 可以。 - Internet Explorer 8 不允許您使用
delete刪除密鑰 運算符。 - Firefox 3.5 是唯一維護
sessionStorage的瀏覽器 瀏覽器崩潰時的數據，並在瀏覽器崩潰後重新啟動時使其可用。 - Internet Explorer 8 以異步方式將數據保存到 s 中，而其他系統則以同步方式保存數據。要強制 IE 立即寫入，請調用專有的
begin()方法，然後進行更改，然後調用專有的commit()方法。 - Firefox 和 Safari 的存儲限制為每個域 5MB，Internet Explorer 的限制為每個域 10MB。
- Internet Explorer 8 僅支持
urlevent的屬性 對象。 - 當您嘗試訪問
sessionStorage時，Firefox 3 和 3.5 會拋出錯誤 如果在瀏覽器上禁用了 cookie（錯誤）。
安全問題
我真正喜歡 sessionStorage 的原因是它牢記安全性。通過限制對單個窗口或選項卡的數據訪問，將數據綁定到協議、域和端口，然後在窗口或選項卡關閉時刪除數據，實現真正確保數據不能被有害訪問方法。不過，還有一個安全問題需要擔心。要理解這個問題，請考慮以下場景。
您登錄網站查看您的郵件，郵件應用程序將有關這些電子郵件的信息保存在 sessionStorage 中 .然後，您將選項卡切換到另一個窗口，您可以在其中註銷正在閱讀您的電子郵件的帳戶。這在使用單點登錄 ID（如 Yahoo!）時是非常可能的。 ID（但請注意，這只是一個示例，Yahoo! 實際上並沒有這樣做）。然後您切換回電子郵件選項卡，您的數據仍然存在於 sessionStorage 中 即使您已註銷。單擊各種電子郵件會從 sessionStorage 中檢索數據 並顯示它。您現在正在註銷時查看個人信息。
當您離開該計算機而沒有關閉瀏覽器並且另一個用戶坐在您的位置時，會發生更危險的情況。使用正常的安全 Ajax 通信，每個請求都會檢查您的憑據，因此可以避免這種情況。如果數據在 sessionStorage ，因為沒有服務器請求，所以沒有憑證驗證，這就開啟了這個安全問題。
如果您使用的是 sessionStorage 對於個性化數據的存儲，無論何時訪問數據以進行讀取或寫入，您都需要驗證用戶的身份。你怎麼做到這一點？大多數登錄流程通過為您正在訪問的域添加特定的 cookie 來工作，這樣您就不必在每個頁面上登錄。我的建議是在數據保存到 sessionStorage 時拍攝 cookie 的快照 並將其存儲在 sessionStorage 連同實際數據。然後，每次您從 sessionStorage 讀取或寫入 ，驗證 cookie 的當前值是否與存儲的相同。如果有任何差異，請刪除 sessionStorage 中的所有值 .由於所有窗口和選項卡共享相同的 cookie，因此 cookie 會立即通過 JavaScript 動態更新和可用。使用 YUI 3 的示例：
function validateUser(){
var currentCookie = Y.Cookie.get("login");
if (currentCookie != sessionStorage.storedCookie){
sessionStorage.clear();
sessionStorage.storedCookie = currentCookie; //reset
}
}
function saveData(key, value){
validateUser();
sessionStorage[key] = value;
}
function getData(key){
validateUser();
return sessionStorage[key];
}
使用此代碼，您將使用 saveData() 和 getData() 而不是訪問 sessionStorage 直接地。每個方法調用 validateUser() ，它會檢查名為“login”的 cookie。這種方法假定“登錄”cookie 包含每個用戶的唯一哈希，並在用戶註銷時被刪除。
結論
sessionStorage object 是一種以相對安全的方式將數據保存在客戶端上的非常有用的方法。儘管如上一節所述，存在一些突出的安全問題，但與該系統為您提供的內置保護相比，這些問題相對容易緩解。尤其是在當今的 Web 2.0/Ajax 世界中，瀏覽器通常會長時間處於打開狀態，使用 sessionStorage 在客戶端緩存數據 可以顯著改善用戶在支持它的瀏覽器中的體驗。
