小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题

栏目: IT技术 · 发布时间: 4年前

内容简介:1、主要技术点:sessionStorage 会话存储进度这里在使用之前,顺便说一下cookie、sessionStorage、localStorage共同点:都是保存在浏览器端,且同源的。

1、主要技术点:sessionStorage 会话存储进度

这里在使用之前,顺便说一下cookie、sessionStorage、localStorage

共同点:都是保存在浏览器端,且同源的。

区别: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用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

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

2、在全局监听websocket后,如果进度有变化,立即存储进度、进度详情至本地

window.sessionStorage.setItem('storeObject', JSON.stringify(storeObject));

3、在展示进度条的页面中设置进度,监听websocket推送进度值的变化并赋值给页面的变量并存储

let storeObject= {};
    storeObject.platPercentage = this.platPercentage;
    storeObject.percentDetail = this.percentDetail; 
    window.sessionStorage.setItem('storeObject', JSON.stringify(storeObject));

4、最重要的一步,在加载页面之前,判断session存储的值是否存在,如果存在,就赋值进度,不存在,正常进行页面加载

if(window.sessionStorage.getItem('storeObject')){
			let storeObject= JSON.parse(window.sessionStorage.getItem('storeObject')); 
			this.platPercentage = storeObject.platPercentage;
			this.percentDetail = storeObject.percentDetail; 
		}else{

		}

如此,就能实现在传输过程中,跳转其他页面,不管什么时候再进入页面进度条仍然会实时显示啦


以上所述就是小编给大家介绍的《小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Smashing Book

The Smashing Book

Jacob Gube、Dmitry Fadeev、Chris Spooner、Darius A Monsef IV、Alessandro Cattaneo、Steven Snell、David Leggett、Andrew Maier、Kayla Knight、Yves Peters、René Schmidt、Smashing Magazine editorial team、Vitaly Friedman、Sven Lennartz / 2009 / $ 29.90 / € 23.90

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create succes......一起来看看 《The Smashing Book》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具