利用cookie实现iframe刷新时停留在当前页面

<script>
//记录当前页面url
document.cookie="url=regist_code.html";
</script>

2.在主页面中读取cookie中键为‘url‘的值。代码如下:

 <iframe id="index_frame" name="index_Frame" src=""
width="100%" height="88%" allowTransparency="true" frameborder="0" ranat="server"></iframe>

//js代码
<script>
var iframe = document.getElementById(‘index_frame‘);
if(iframe.getAttribute(‘src‘)!=‘‘){
iframe.setAttribute(‘src‘,‘index.html‘);//判断第一次进入页面时,显示的是第一个页面,详见ps
}
function getCookie(url)
{
if (document.cookie.length>0)
{
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
//遍历cookie数组,处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
//找到名称为userId的cookie,并返回它的值
if(url==arr[0]){
return(arr[1]);
break;
}
}
}
}
iframe.setAttribute(‘src‘,getCookie(‘url‘));//重新设置获取的url,实现刷新显示当前页面
</script>

ps:本次例子是将所有的页面都提出来,包括主页,所以第一次的进入页面的时候需要设置iframe的src,如果直接在src中写入src="index.html"的话,当页面刷新时会有延迟,使得页面先出现index.html的内容,然后才显示其他当前点击页面的内容。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3 + Vite + Element Plus,要实现页面刷新保留数据,可以借助浏览器的Cookie来存储数据。下面是一个简单的实现步骤: 1. 安装cookie库:在项目使用`npm`或`yarn`安装`js-cookie`库。 ```bash npm install js-cookie 或 yarn add js-cookie ``` 2. 创建一个`utils`文件夹,然后在该文件夹下创建一个名为`cookie.js`的文件。 3. 在`cookie.js`文件,引入`js-cookie`库,并创建以下两个方法: ```javascript import Cookies from 'js-cookie'; // 存储数据到Cookie export function setCookie(key, value) { Cookies.set(key, value); } // 从Cookie读取数据 export function getCookie(key) { return Cookies.get(key); } ``` 4. 在需要保留数据的组件,例如`Home.vue`,使用`setCookie`方法将数据存储到Cookie。 ```javascript import { setCookie } from '@/utils/cookie'; export default { mounted() { // 假设要保存的数据是一个对象 const data = { name: 'John', age: 25 }; // 存储数据到Cookie setCookie('data', JSON.stringify(data)); }, }; ``` 5. 在需要恢复数据的组件,例如`Profile.vue`,使用`getCookie`方法从Cookie读取数据。 ```javascript import { getCookie } from '@/utils/cookie'; export default { data() { return { data: null, }; }, mounted() { // 从Cookie读取数据 const cookieData = getCookie('data'); if (cookieData) { this.data = JSON.parse(cookieData); } }, }; ``` 通过上述步骤,你可以在刷新页面后仍然保留数据。当需要存储数据使用`setCookie`方法将数据存储到Cookie;当需要恢复数据使用`getCookie`方法从Cookie读取数据。请注意,Cookie的大小是有限制的,如果存储的数据量较大,可能会超过Cookie的大小限制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值