浏览器的数据存储
会有这么一些个需求,数据不需要存储到服务器端,只需要在客户端(浏览器)取到相关数据,那么有几种方式我们可以使用:
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