Web 数据存储总结

简介:
随着Web应用程序的出现,也产生了对于能够在客户端上存储用户信息能力的要求。这个问题的第一个解决方案是以cookie形似出现的。网景公司在一份名为“Persistent Client State: HTTP Cookies”的标准中对cookie机制进行了阐述。
cookie限制:
  1. 每个域的cookie个数是有限的,ie7之后是每个域30个,firefox是50个,chrome和safari没有限制
  2. 当超过单个域名cookie限制后,还要设置cookie,浏览器就会清除前的cookie;ie和opera会删除最近最少使用过的cookie;firefox的删除并没有规律
  3. 单个cookie的容量也有限制,每个至多4kb,超过4kb这个cookie会无声消失掉。
cookie的构成:
  • 名称:一个唯一确定cookie的名称。cookie的名称必须是经过url编码的
  • 值:存储在cookie中字符串值。值必须被url编码
  • 域:cookie对于哪个域是有效的。所有向该域发送的请求都会包含这个cookie信息。这个值可以包含子域:www.wrox.com也可以不包含子域:.wrox.com
  • 路径:指定对于域中的那个路径,应该向服务器发送cookie。
  • 失效时间:表示cookie何时应该被删除的时间戳。默认情况下,浏览器回话结束时即将所有cookie删除;如果设置过期时间,cookie可在浏览器关闭后依然保存在用户的机器上。
  • 安全标志:指定后,cookie只有在使用SSL连接的时候才能发送到服务器。
尤其注意:域、路径、失效时间和secure标志都是服务器给浏览器的指示,以指定何时应该发送cookie。这些参数并不会作为发送到服务器的cookie信息的一部分,只有名值对才会被发送。
 
document.cookie浏览器提供的用来访问和设置cookie。这个属性的特殊之处在于因为使用它的方式不同而表现出不同的行为:
  • 当用来获取属性时,document.cookie返回当前页面可用的(根据域、路径、失效时间和安全设置)所有cookie的字符串,一系列由分号隔开的键值对:"nam1=value1;name2=value2;name3=value3"注意最后没有分号
  • 当用于设置值的时候,document.cookie属性可以设置为一个新的cookie字符串。这个cookie字符串会被解释并添加到现有的cookie集合中。除非cookie名已经存在,否则设置document.cookie并不会覆盖cookie。:document.cookie=encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; domain=.wrox.com; path=/";
WebStorage
webStorage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无需持续地将数据发回服务器。Web Storage的两个主要目的:
  • 提供一种在cookie之外存储会话数据的途径;
  • 提供一种存储大量可以跨会话存在的数据的机制;
Storage类型
Storage类型提供最大的存储空间来存储键值对儿。Storage的实例主要常用以下方法:
  • getItem(name):根据指定的名字name获取对应的值
  • removeItem(name):删除由name指定的键值对儿
  • setItem(name):位指定的name设置一个对应值
还可以使用length属性来判断有多少键值对存放在Storage对象中。
 
localStorage对象
要访问同一个localStorage对象,页面必须来自同一个域(子域名无效),使用同一协议,在同一窗口上。
存储在localStorage中的数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
storage事件
对storage对象进行任何修改,都会在文档上触发storage事件。
document.addEventListener('storage', function(evt){});
 
大多数桌面浏览器对localStorage的限制都是5MB,chrome和safari对其限制是2.5mb。
目录
相关文章
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
3月前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
66 9
|
5月前
|
存储 数据库 开发者
IndexedDB解密:打开Web应用的数据存储之门
IndexedDB解密:打开Web应用的数据存储之门
230 0
|
存储 前端开发 API
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
90 0
|
存储 Web App开发 移动开发
localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结
localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结
|
存储 缓存 移动开发
Web应用中的离线数据存储
为了提升Web应用的用户体验,想必很多开发者都会项目中引入离线数据存储机制。可是面对各种各样的离线数据技术,哪一种才是最能满足项目需求的呢?本文将帮助各位找到最合适的那一个。
306 0
|
存储 缓存 算法
页面相关的数据存储(缓存及Web Storage)
页面可用的缓存包括:Http Cache, Local Storage, Session Storage以及Application Cache. 它们都可以用来减少请求数量,以提高页面的性能及减少流量消耗,这对于移动端的浏览器来说更为重要 (另外还有Memory Cache, 不过对于前端工程而言是透明的)。
1352 0
|
存储 Web App开发 移动开发
浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase
Cookie 它是标准的客户端浏览器状态保存方式,可能在浏览器诞生不久就有Cookie了,为什么需要Cookie 这个东东?由于HTTP协议没有状态,所以需要一个标志/存储来记录客户浏览器当前的状态,保证客户浏览器和服务器通讯时可以知道客户浏览器当前的状态。
1228 0