浏览器的数据存储

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

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