在 Web瀏覽器中存儲數據以改善用戶體驗和提升Web應用程序性能是非常常見的。在大多數情況下，可供我們使用就是LocalStorage和SessionStorage。

本文中，我們將會從安全性和用戶體驗兩個方面對SessionStorage和LocalStorage進行評估。然后我們將討論如何根據您的要求挑選合適使用的對象。

一、API的使用方式

1、localStorage：

// 存儲數據
localStorage.setItem('key', 'value');// 讀取數據
localStorage.getItem('key');// 刪除數據
localStorage.removeItem('key');// 刪除全部
localStorage.clear();

2、sessionStorage：

// 存儲數據
sessionStorage.setItem('key', 'value');// 讀取數據
sessionStorage.getItem('key');// 刪除數據
sessionStorage.removeItem('key');// 刪除全部
sessionStorage.clear();

二、localstorage和sessionStorage的區別:

1、相同點

• 它們的儲存大小都是5M;

• 它們都用于存儲客戶端數據；

• 它們都只能存儲字符串數據；

2、不同點

生命周期不同:

• SessionStorage的生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉，那么所有通過SessionStorage存儲的數據也就被清空了。

• LocalStorage的生命周期是永久，除非用戶顯示在瀏覽器提供的UI上清除LocalStorage信息，否則這些信息將永遠存在。

作用域不同:

• SessionStorage數據獨立于其他選項卡和窗口。如果同時打開了兩個選項卡，其中一個更新了SessionStorage，則在其他選項卡和窗口中不會反映出來。

• LocalStorage可跨瀏覽器窗口和選項卡間共享。如果在多個選項卡和窗口中打開了一個應用程序，而一旦在其中一個選項卡或窗口中更新了LocalStorage，則在所有其他選項卡和窗口中都會看到更新后的LocalStorage數據。

三、相比Cookie有如下優點

• 擁有更大的存儲容量，Cookie是4k，Web Storage為5M。

• 操作數據相比Cookie更簡單。

• 不會隨著每次請求發送到服務端。

四、安全性

Web Storage的存儲對象是獨立于域名的，也就是說不同站點下的Web應用有著自己獨立的存儲對象，互相間是無法訪問的，在這一點上SessionStorage和LocalStorage是相同的。

• 部署在http://example.com上的Web應用無法訪問http://example.cn的Web Storage存儲對象。

• 對于子域名也是一樣，盡管http://www.example.com.cn和http://www1.example.com.cn 同屬http://example.com.cn 主域下，但它們相互不能訪問對方的存儲對象。

• 對于針對使用http和https協議間也是不同的。也就是說http://example.com 與https://example.com 也是相互隔離。