【芝士整理】浏览器存储

Cookie维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。服务器端生成Cookie推送到浏览器端，浏览器负责保存和维护数据。特点域名下的所用请求都会带上Cookie每条Cookie限制在4KB左右Cookie在过期时间之前一直有效，若未设置过期时间，关闭浏览器窗口即失效服务端通过响应头中的set-cookie向浏览器写入cookie，浏览器端可以通过document.cookie读写cookie（若一条Cookie在响应头中设置了HttpOnly标识，浏览器将无法获取和操作该条Cookie）WebStorageWebStorage —— 浏览器本地存储方案，包括SessionStorage和LocalStorage两者的差异在存储周期上，使用方法上无差异SessionStorage限制在页面内的单次本地存储特点仅在当前页面有效关闭页面或者浏览器窗口后失效LocalStorage限制在同源内的持久本地存储特点遵循同源策略除非手动清除，否则一直保存在本地共同特性存储大小一般存储空间为5MB左右，桌面端Chrome40+，FireFox34+，IE9+默认调整至10MB（本地测试结果与此相矛盾），部分浏览器可由用户手动调整上限。StackOverflow - 关于计算LocalStorage上限错误处理同步读写，通过try…catch捕获错误信息。如下捕获超限错误try { localStorage.setItem(data.name, JSON.stringify(data));} catch(domException) { if (domException.name === ‘QuotaExceededError’ || domException.name === ‘NS_ERROR_DOM_QUOTA_REACHED’) { // Fallback code comes here. }}存储格式数据以字符串格式存储，对象写入时需使用JSON.stringify转换为字符串，再使用JSON.parse转换为对象。IndexedDB大量数据的结构化存储特点遵循同源策略除非手动清除，否则一直保存在本地存储空间大，一般为250MB主键对应值存储，比如以ID为主键存储对应数据支持各类存储格式，甚至是二进制数据(Blob)异步存储，禁止在页面reload时做批量存储Web SQL非官方规范，目前已弃用Application Cache应用缓存（又称 AppCache）可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。利用应用缓存，保证离线情况下正常使用，减少网络请求，加快访问速度大部分浏览器对缓存数据容量的限制时5MB应用缓存初级使用指南简易说明库localForage - 封装IndexedDB, WebSQL, localStorage，提供统一API