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