【芝士整理】浏览器存储

whlong 发布于2019-08-23 14:20 / 2973人阅读

摘要：维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。服务器端生成推送到浏览器端，浏览器负责保存和维护数据。

Cookie

维护浏览器和服务器端会话状态的一种方式，一般用于保存用户身份信息。

服务器端生成Cookie推送到浏览器端，浏览器负责保存和维护数据。

特点

域名下的所用请求都会带上Cookie

每条Cookie限制在4KB左右

Cookie在过期时间之前一直有效，若未设置过期时间，关闭浏览器窗口即失效

服务端通过响应头中的set-cookie向浏览器写入cookie，浏览器端可以通过document.cookie读写cookie（若一条Cookie在响应头中设置了HttpOnly标识，浏览器将无法获取和操作该条Cookie）

WebStorage

WebStorage —— 浏览器本地存储方案，包括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

云服务器专线服务芝士存储数据整理及存储方案芝士浏览器存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100444.html

【芝士整理】HTML的标签们

摘要：读一遍文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。结构化，通过标签先后顺序和嵌套语法给树提供基础。标签列表基于个人理解即非官方描述，给标签划分为结构化标签语义化标签功能化标签，文档标签。读一遍MDN文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。关于HTML HTML的作用可以简单总结为结构化、语义化和提供基础...

stonezhu 2019-08-02 16:06 评论0 收藏0
【前端芝士树】Array的属性及方法整理（参照MDN）

摘要：本文主要是我自己对的一些整理，参考自，其中的分类有些不准确之处，还望见谅的基本属性属性的一些方法增删改查基础功能增删改查基础功能增删改删除数组的第一个元素删除数组的最后一个元素在数组的开头一个或多个元素，在数组的末尾增加一个或者多个元素数组本文主要是我自己对Array的一些整理，参考自MDN，其中的分类有些不准确之处，还望见谅 Array const arr = [1, 2, 3, ...

MoAir 2019-08-23 16:15 评论0 收藏0
【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0