sessionStorage保存数据以便页面间进行数据传递

 

源于需求的不断变化,就会想到在一个网站中,多个页面怎样进行数据的传递?比如首页的某个状态或者信息在其他页面做逻辑判断时需要使用到该怎么办?这也就是页面间进行数据传递,很好,sessionStorage和localStorage就是存储数据的,一个是会话存储,一个是本地存储,区别想必也和容易理解。

先介绍关系,再上代码。

联系:

(1)localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

(2)均只能存储字符串类型的对象。

(3)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

同源:域名,协议,端口相同。

区别:

sessionStorage:生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

代码:

session操作:

//首页JS部分的session操作: sessionStorage.setItem(\\\’state\\\’,\\\’1\\\’); sessionStorage.getItem(\\\’state\\\’); console.log(sessionStorage.getItem(\\\’state\\\’));  // 1

//另一页面的session操作 var getState = sessionStorage.getItem(\\\’state\\\’); console.log(getState); // 1

local操作:

?//首页JS部分的local操作: localStorage.setItem(\\\’state\\\’,\\\’1\\\’); localStorage.getItem(\\\’state\\\’); console.log(localStorage.getItem(\\\’state\\\’));  // 1 ?

//另一页面的local操作 var getState = localStorage.getItem(\\\’state\\\’); console.log(getState); // 1

很简单,就这样已经实现了存储和传递。在控制台中Application查看,可以发现Session Storage中state在浏览器没有关闭时数据始终存在,关闭之后清空。而Local Storage中state始终存在,直到人为删除数据。

更多关于云服务器域名注册虚拟主机的问题,请访问西部数码官网:www.west.cn

赞(0)
声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-62778877-8306;邮箱:fanjiao@west.cn。本站原创内容未经允许不得转载,或转载时需注明出处:西部数码知识库 » sessionStorage保存数据以便页面间进行数据传递

登录

找回密码

注册