瀏覽器的數據存儲
阿新 • • 發佈：2018-01-04
請求 服務器端 bsp ie11 java document .com opera cnblogs
會有這麽一些個需求，數據不需要存儲到服務器端，只需要在客戶端（瀏覽器）取到相關數據，那麽有幾種方式我們可以使用：
Cookie、LocalStorage、SessionStorage、UserData，當然還有一些方式比如flash cookie，Gears等要依賴插件，這就不在我們的介紹範圍了。
我會簡單介紹其用法、適用場景以及瀏覽器兼容性；
| 原生用法 | 適用場景 | 瀏覽器兼容 | 可存儲最大空間 | 推薦的庫 | |
| Cookie |
//寫入 document.cookie = "name=oeschger"; document.cookie = "favorite_food=tripe"; //讀取 alert(document.cookie) |
登陸 |
IE11, Chrome49, FireFox57,Safari10.1 |
4KB | cookiejs |
| LocalStorage |
//寫入 localStorage.setItem(‘myCat‘, ‘Tom‘); //讀取 localStorage.getItem(‘myCat‘); |
IE11, Chrome49, FireFox57,Safari10.1 |
IE 9 > 4999995 + 5 = 5000000 firefox 22.0 > 5242875 + 5 = 5242880 chrome 28.0 > 2621435 + 5 = 2621440 safari 5.1 > 2621435 + 5 = 2621440 opera 12.15 > 5M （超出則會彈出允許請求更多空間的對話框） |
||
| SessionStorage |
// Save data to sessionStorage sessionStorage.setItem(‘key‘, ‘value‘); // Get saved data from sessionStorage var data = sessionStorage.getItem(‘key‘); // Remove saved data from sessionStorage sessionStorage.removeItem(‘key‘); // Remove all saved data from sessionStorage sessionStorage.clear(); |
IE11, Chrome49, FireFox57,Safari10.1 |
5M |
一個localStorage和sessionStorage的區別：
localStorage沒有過期時間，sessionStorage關閉瀏覽器會清空。
推薦一款測試storage的工具：
http://dev-test.nemikor.com/web-storage/support-test/
參考:
1. https://caniuse.com
2. https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
3. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
4. https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
5. https://www.cnblogs.com/henryhappier/archive/2011/03/03/1969564.html
瀏覽器的數據存儲