`
三里小龙
  • 浏览: 87910 次
  • 性别: Icon_minigender_1
  • 来自: 孝感
社区版块
存档分类
最新评论

【转】浏览器本地数据(sessionStorage、localStorage、cookie)与server端数据

    博客分类:
  • Web
阅读更多

sessionStorage 和 localStorage 是HTML5 Web  Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、 localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。 sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面, 数据仍然存在。 关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。
Web  Storage 带来的好处: 减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少 数据在浏览器和服务器间不必要地来回传递。 快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。 临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用 sessionStorage非常方便。

浏览器本地存储与服务器端存储之间的区别 其实数据既可以在浏览器本地存储,也可以在服务器端存储。
浏览器端可以保存一些数据,需要的时候直接从本地获取,sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
服务器端也可以保存所有用户的所有数据,但需要的时候浏览器要向服务器请求数据。1.服务器端可以保存用户的持久数据,如数据库和云存储将用户的大量数据保存在服务器端。2. 服务器端也可以保存用户的临时会话数据。服务器端的session机制,如jsp的 session 对象,数据保存在服务器上。实现上,服务器和浏览器之间仅需传递session id即可,服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效,这个时间就是server端设置的session有效期。
服务器端 保存所有的用户的数据,所以服务器端的开销较大,而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据,而服务器可以存储大数据或小数据。服务器存储数据安全一些,浏览器只适合存储一般数据。

sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。区别:cookie 数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和 localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径 下。 存 储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。 sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。 数据有效期不同, sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持; localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据; cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 作用域不同, sessionStorage不在 不同的浏览器窗口中共享,即使是同一个页面; localStorage 在所有同源窗口中都是共享的;cookie也是在 所有同源窗口中都是共享的。 Web  Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。 Web  Storage  的 api 接口使用更方便。

 

sessionStorage  和  localStorage 之间的区别 见上面的区别3、4


sessionStorage与页面 js 数据对象的区别 页面中一般的 js 对象或数据的生存期是仅在当前页面有效,因此刷新页面或转到另一页面这样的重新加载页面的情况,数据就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,刷新页面或进入同源的不同页面, 数据 始终存在。也就是说只要这个浏览器窗口没有关闭,加载新页面或重新加载,数据仍然存在。

 

cookie,容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽。
userdata,只有ie支持,单个容量64kb,每个域名最多可存10个共计640k数据。默认保存在C:\Documents and Settings\Administrator\UserData\目录下,保存格式为xml。关于userdata更多资料参考http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp

sessionStorage与localStorage

Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie?

与Cookie相比,Web Storage存在不少的优势,概括为以下几点:

1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。

4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

兼容性如何?

接下来的各种测试是在以下浏览器中进行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事实证明各个浏览器在API方面的实现基本上一致,存在一定的兼容性问题,但不影响正常的使用

分享到:
评论

相关推荐

    js做的cookie记忆功能

    Cookie是服务器发送到用户浏览器并存储在本地的一小段数据,用于在多次请求之间保持状态。JavaScript提供了`document.cookie`接口来读取和设置cookies。 实现这个功能的关键步骤如下: 1. **设置Cookie**:当用户...

    cookie的读取和写入

    4. **跨域问题**:Cookie只能在同一域名或子域名之间共享,如果需要跨域访问,则需要使用其他机制如SessionStorage或LocalStorage。 #### 六、总结 Cookie作为一种简单而强大的状态管理技术,在Web开发中有着广泛...

    怎样使用Cookie跟踪来访者

    如果需要存储更多的数据,可以考虑使用多个Cookie或者其他的存储机制,如SessionStorage、LocalStorage等。 #### 七、总结 通过以上示例,我们可以看到如何在ASP中使用Cookie来跟踪用户访问次数。这种方法简单有效...

    jQuery用Cookie实现加入购物车带抛物线效果

    此外,还可以使用localStorage或sessionStorage作为替代方案,它们在现代浏览器中的支持更好且容量更大。 综上所述,通过结合jQuery的事件处理和动画功能,以及Cookie的持久化存储特性,我们可以创建一个既有实用性...

    Java很好的学习笔记函数式接口md,学习代码

    而HTML5引入的localStorage和sessionStorage则提供了浏览器端的持久化存储,其中localStorage的数据不会随会话结束而消失,而sessionStorage只在当前会话有效。 在Web开发中,正确使用这些存储机制对于提升用户体验...

    解决vue router组件状态刷新消失的问题

    通常,结合使用cookie和sessionStorage是比较常见的做法,将敏感的认证信息(如token)存储在cookie中,其他非敏感的用户数据则存储在sessionStorage中。同时,为了提高用户体验,可以考虑使用Vuex的持久化插件来...

    Java很好的学习笔记lambdamd,学习代码

    - **sessionStorage**:类似于localStorage,但数据仅在当前会话期间有效,关闭浏览器窗口后数据会被清除。 了解这些技术的区别和用法对于构建高效、安全的Web应用至关重要。 其余的文件名如`lambda.md`、`javaweb...

    JS写的RPG游戏代码

    - **SaveLoad.asp**:保存和加载游戏进度的功能,可能使用了浏览器的localStorage或sessionStorage。 - **Title.asp**:游戏启动界面,提供开始游戏、读取存档等选项。 - **Load.asp**:加载存档的界面和逻辑。 ...

    AJAX FAQ for the Java Developer.doc

    另一种方法是使用SessionStorage或LocalStorage API在客户端本地存储数据,但这受到浏览器的安全限制。对于更复杂的状态管理,可以考虑在服务器端维护状态,并通过AJAX请求来回传给客户端。 16. **无需页面刷新提交...

    HTML5高级程序设计读后感整理分享.docx

    2. **Storage API**:HTML5引入了Web Storage(包括localStorage和sessionStorage),提供了比传统Cookie更高效、更大容量的数据存储方式,便于在浏览器端保存用户数据,提高应用性能和用户体验。 3. **WebSockets*...

    眼疾手快HTML5游戏源码,运行需要服务器环境

    4. **Web Storage**:HTML5提供了`localStorage`和`sessionStorage`,用于在浏览器端存储数据,取代了传统的Cookie,提高了数据存储的容量和效率。游戏状态或用户设置可能就存储在这里。 5. **Web Workers**:Web ...

    2021大厂前端核心面试题详解 二1

    - LocalStorage 和 SessionStorage:存储用户数据,减少网络请求。 当遇到长时间执行的JavaScript,分析方法包括: - 使用装饰器来计算函数执行时间,以便定位性能瓶颈。 - 利用浏览器的开发者工具(如Chrome ...

    JavaWeb.pdf

    - 支持本地存储:`localStorage` 和 `sessionStorage`。 - 新增多媒体元素:`<video>` 和 `<audio>`。 - 更好的表单控制类型:日期选择器、滑块等。 - 画布:`<canvas>` 元素用于图形的绘制。 - SVG:内联矢量...

    2014javaee期末考试试题(计算机系).pdf

    Web存储提供了更高级别的存储机制,包括localStorage和sessionStorage。 16. JSP标签库(Tag Library) JSP标签库允许开发者定义自定义标签来封装功能,提高代码的复用和可维护性。 17. Java编程 Java是一种面向...

    C%23面试题

    - `Server.Transfer`:服务器端转移请求,不改变URL,适用于同服务器内部转移。 - `Application`:全局变量,存储整个应用程序的共享数据。 - `Cache`:缓存数据,用于提高性能。 - `HttpContext.Item`:存储...

    html5-api:HTML5 API示例服务

    - 本地存储分为两种:`localStorage`用于永久性存储,数据不会因浏览器关闭而丢失;`sessionStorage`则在会话期间有效,浏览器窗口关闭后数据将被清除。 - 使用方法:通过`window.localStorage`或`window....

    基于Html5的webapp.pdf

    8. **本地存储**:HTML5提供了DOM Storage(包括localStorage和sessionStorage)和IndexedDB,用于在用户浏览器中存储大量数据,解决了Cookie存储容量有限的问题。 9. **设备访问API**:Device API允许Web应用访问...

    java可变长参数(三个点)md,学习代码

    Cookie是服务器发送到浏览器并保存在本地的一小块数据,可用于跟踪用户状态。Session是服务器端的一种存储机制,用于存储用户的会话信息。而`localStorage`和`sessionStorage`是HTML5引入的Web存储机制,它们分别...

    part3 JS Additional articles.pdf

    - **LocalStorage/SessionStorage**:提供了比 cookies 更大的存储空间,分别用于长期存储和临时存储。 - **IndexedDB**:一个低级别的 API,提供了复杂的数据库操作能力,适用于大型数据的存储。 ### Animation *...

Global site tag (gtag.js) - Google Analytics