`

web数据储存cookies、sessionStorage和localStorage

 
阅读更多

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方面的实现基本上一致,存在一定的兼容性问题,但不影响正常的使用。

分享到:
评论

相关推荐

    cookies,sessionStorage 和 localStorage 的区别1

    cookies、sessionStorage 和 localStorage 是三个常用的浏览器端存储机制,它们都可以在浏览器端存储数据,但它们之间有着很大的不同。 cookies cookies 是一种传统的浏览器端存储机制,它可以存储小数据,通常...

    Web存储:localStorage和sessionStorage.docx

    Web存储技术主要包括localStorage和sessionStorage两种存储方式,它们相对于传统的Cookies技术具有存储容量更大、数据安全性更高以及更加灵活的数据管理等优势。 localStorage和sessionStorage提供了更大的存储空间...

    html5+css3面试题答案.docx

    Cookies、SessionStorage 和 LocalStorage 都是在浏览器端存储的数据,但它们有所不同。Cookies 会被发送到服务器端,而 SessionStorage 和 LocalStorage 不会。SessionStorage 的概念很特别,它引入了一个“浏览器...

    前端 45 道面试题及答案.docx

    SESSIONSTORAGE和LOCALSTORAGE不会自动把数据发给服务器,仅在本地保存。COOKIE数据大小不能超过4KB,而SESSIONSTORAGE和LOCALSTORAGE可以达到5M或更大。 跨域问题: 跨域问题是指在不同的域名之间共享资源的安全...

    前端面试文件content_1636425212663(1).docx

    * Cookies 和 SessionStorage/LocalStorage 的区别:Cookies 的数据始终在同源的 http 请求中携带,而 SessionStorage 和 LocalStorage 的数据都是在本地存储,不会发送给服务器 浏览器的离线储存 * 浏览器如何对 ...

    2019前端经典面试题.doc

    cookies、sessionStorage 和 localStorage 都是客户端存储数据的方式,但它们有不同的特点。cookies 的数据大小不能超过 4k,有效时间可以设置,而 sessionStorage 和 localStorage 可以达到 5m 或更多,数据会自动...

    解析HTML5的存储功能和web SQL的相关操作方法

    然而,由于维护问题和Web Storage(包括localStorage和sessionStorage)的发展,Web SQL逐渐被IndexedDB所取代,后者提供了更强大的功能和更丰富的数据模型。 在实际应用中,考虑到Web SQL的弃用和更好的替代品 ...

    2018年Web面试题目汇总

    - HTML5提供了localStorage和sessionStorage两种离线存储方式。 - localStorage用于长期存储数据,即使关闭浏览器数据也不会丢失。 - sessionStorage用于临时存储数据,关闭浏览器后数据会自动删除。 8. iframe...

    JavaScript使用localStorage存储数据

    2. 存储空间限制:虽然比早期的Cookies和IE userData大得多,但localStorage仍然有限制。不同的浏览器会有所不同,但一般来说,每个网站可以使用大约5MB的空间。 3. 存储内容格式:localStorage仅支持字符串格式的...

    WEB开发 之 HTML 5 Web 存储.docx

    总结起来,HTML5的Web存储(localStorage和sessionStorage)为开发者提供了强大而灵活的工具,用于在客户端存储和检索数据,极大地提高了Web应用程序的功能性和用户体验。它们解决了cookies的不足,使Web应用能够...

    浏览器端IndexedDB数据存储方案解析及优化工具dexie.js的应用指南

    文中首先解释了现有浏览器存储方式如Cookies、SessionStorage和LocalStorage的局限性,并由此引出了IndexedDB的诞生必要性和独特特点,比如大容量、异步处理以及复杂API概念,接着探讨了dexie.js的优势——使得原本...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    Web SQL Database的使用比localStorage和sessionStorage复杂得多,它要求开发者具备一定的数据库知识。 由于篇幅限制,本文不再详细介绍Web SQL Database的使用,但是应该注意,它的替代方案IndexedDB在现代浏览器...

    html页面传值

    在本文中,我们将深入探讨几种常见的HTML页面传值技术,包括URL参数、表单提交、cookies、sessionStorage和localStorage,以及AJAX异步通信。 1. URL参数: 当用户点击链接或通过表单提交时,可以将数据附加到URL...

    大厂阿里字节百度前端校招面试题大全.pdf

    1. cookies、sessionStorage 和 localStorage 都是 Web Storage 的一种,用于存储客户端数据。 2. cookies 是一种小型文本文件,用于存储少量数据,主要用于身份验证和追踪用户行为。sessionStorage 和 localStorage...

    详解web存储中的storage

    2. 容量较大:localStorage和sessionStorage的容量比早期的Cookies存储更大,通常情况下,sessionStorage的容量约为5MB,而localStorage的容量可达20MB或更多。 3. 直接存储字符串:Web存储可以直接存储字符串数据...

    Client-Side Data Storage Keeping It Local 2016

    它主要分为两个部分:LocalStorage和SessionStorage。LocalStorage提供了一个无时间限制的存储区域,数据会在用户清除浏览器数据之前一直存在。而SessionStorage仅在单个会话中有效,关闭浏览器标签页或窗口后数据会...

    LocalStorage:本地存储

    LocalStorage是Web应用程序中的一种本地数据存储机制,它属于HTML5的一部分,为JavaScript提供了一种在浏览器端持久化存储用户数据的方法。与cookies相比,LocalStorage具有更大的存储容量(通常为5MB),并且不会...

Global site tag (gtag.js) - Google Analytics