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 的区别?
cookie、sessionStorage和localStorage的区别
Vue2原型挂载sessionStorage、localStorage、element弹窗
使用Typescript编写更加易用的localStorage和sessionStorage的API
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...
贮存一个存储库,它使用相同的API支持sessionStorage和localStorage安装 npm install good-storage用法 import storage from 'good-storage' // localStorage storage.set(key,val) storage.get(key, def) // ...
存储在客户端的临时信息,只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭,数据清空 存在内存中,除非自己删除 浏览器关闭,数据清空 存储信息 文本类型 字符串类型数据 同左 ...
TypeScript存储模块(内存,sessionStorage,localStorage)和@Cacheable装饰器 安装 npm install rebirth-storage --save 如何使用? 用于存储数据的StorageService 注册StorageService import { ...
安装只需抓取或并将其包含在脚本标签中即可。用法 < script src =" web-store.min.js " > </ script >支持的浏览器在谷歌浏览器中测试兼容性web-store-js与Ext JS 6客户端代理兼容: 和 。
一种更好的方法来使用localStorage和sessionStorage
将json对象使用JSON.stringify(JsonObject)方式转换为字符串,存入到 sessionStorage或localStorage 中;然后从 sessionStorage或localStorage 中取出对应的字符串,使用eval或JSON.parse将字符串转换为json对象。...
一个本地存储工具,通过相同的api去支持localStorage和sessionStorage
一般在我们做项目时,我们都会通过POST请求拿到服务器给到的set-Cookies,保存在浏览器的Cookie里 ...localStorage – 没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。 session
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求...
webstrange又分为:localstorage,sessionstorage和本地数据库。 接下来我就来一一介绍: 1、localstorage localstorage 的使用比较简单,方法有: 复制代码代码如下:localStorage.setItem(key,value);//保存数据...
这个插件的目标是简化 webstorage 的使用(也称为 sessionStorage 和 localStorage): 您可以存储任何类型的数据类型并且不关心转换 你可以使用命名空间 您可以跨不同的选项卡/窗口使用存储事件(也在 IE = 上) ...
本文主要介绍使用cookie解决微信不能存储localStorage的问题,这里提供了代码示例,有需要的小伙伴可以参考下
localStorage,sessionStorage的使用-介绍了localStorage,sessionStorage基本信息及使用注意事项