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。
目录
相关文章
|
6月前
|
存储 前端开发 API
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
35 0
|
存储 Web App开发 移动开发
localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结
localStorage、sessionStorage、cookie、session几种web数据存储方式对比总结
|
存储 缓存 移动开发
Web应用中的离线数据存储
为了提升Web应用的用户体验,想必很多开发者都会项目中引入离线数据存储机制。可是面对各种各样的离线数据技术,哪一种才是最能满足项目需求的呢?本文将帮助各位找到最合适的那一个。
253 0
|
存储 缓存 算法
页面相关的数据存储(缓存及Web Storage)
页面可用的缓存包括:Http Cache, Local Storage, Session Storage以及Application Cache. 它们都可以用来减少请求数量,以提高页面的性能及减少流量消耗,这对于移动端的浏览器来说更为重要 (另外还有Memory Cache, 不过对于前端工程而言是透明的)。
1322 0
|
存储 Web App开发 移动开发
浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase
Cookie 它是标准的客户端浏览器状态保存方式,可能在浏览器诞生不久就有Cookie了,为什么需要Cookie 这个东东?由于HTTP协议没有状态,所以需要一个标志/存储来记录客户浏览器当前的状态,保证客户浏览器和服务器通讯时可以知道客户浏览器当前的状态。
1202 0
|
14天前
|
开发框架 前端开发 .NET
C#编程与Web开发
【4月更文挑战第21天】本文探讨了C#在Web开发中的应用,包括使用ASP.NET框架、MVC模式、Web API和Entity Framework。C#作为.NET框架的主要语言,结合这些工具,能创建动态、高效的Web应用。实际案例涉及企业级应用、电子商务和社交媒体平台。尽管面临竞争和挑战,但C#在Web开发领域的前景将持续拓展。
|
3天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
4天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。