小谢第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推送进度,本地保存进度条,然后跳出页面进入后再显示的问题》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

零基础学Java Web开发

零基础学Java Web开发

刘聪 编 / 机械工业出版社 / 2008-1 / 59.00元

《零基础学Java Web开发:JSP+Servlet+Sfruts+Spring+Hibernte》全面讲解Java Web应用开发的编程技术,并详细介绍Java Web开发中各种常用的技术,可作为Java Web开发技术的学习指南。 《零基础学Java Web开发:JSP+Servlet+Sfruts+Spring+Hibernte》共17章,分为3篇,其中第1~12章是基础篇,讲解了......一起来看看 《零基础学Java Web开发》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试