会有这么一些个需求,数据不需要存储到服务器端,只需要在客户端(浏览器)取到相关数据,那么有几种方式我们可以使用:
Cookie、LocalStorage、SessionStorage、UserData,当然还有一些方式比如 flash cookie,Gears 等要依赖插件,这就不在我们的介绍范围了。
我会简单介绍其用法、适用场景以及浏览器兼容性;
opera 12.15 > 5M (超出则会弹出允许请求更多空间的对话框)
safari 5.1 > 2621435 + 5 = 2621440
chrome 28.0 > 2621435 + 5 = 2621440
firefox 22.0 > 5242875 + 5 = 5242880
IE 9 > 4999995 + 5 = 5000000
- // 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
原生用法 | 适用场景 | 浏览器兼容 | 可存储最大空间 | 推荐的库 | |
Cookie | 登陆 |
IE11, Chrome49, FireFox57,Safari10.1 |
4KB | cookiejs | |
LocalStorage |
IE11, Chrome49, FireFox57,Safari10.1 |
||||
SessionStorage | 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
来源: http://www.bubuko.com/infodetail-2450008.html