浏览器中url存储的Javascript实现

浏览器中url存储的Javascript实现
现在的浏览器,有一个非常有趣的功能,你可以修改URL浏览器而不刷新页面的情况;在浏览过程中。你可以浏览历史记录,当你在浏览器中点击后退按钮时,你可以浏览历史被匆匆赶回,听起来不复杂,可以实现,我们可以写一些代码。看看它是如何工作的。

无功stateobject = { };
var哇;
无功newurl = / / /我可怕的URL;
history.pushstate(stateobject,标题,newurl);
历史对象pushstate()方法有3个参数,你可以从上面的例子中看到它的第一个参数是一个JSON对象,在你存储任何当前URL的历史信息。第二个参数,标题相当于一个文件标题的传递,第三个参数用来传递新URL。你会看到浏览器地址栏改变当前页面不刷新。

让我们看一个示例,在其中我们将在任意独立URL中存储任意数据。

对于(i = 0;i < 5;i + +){
无功stateobject = {编号:我};
var;
无功newurl = / / /网址我真棒 / +我;
history.pushstate(stateobject,标题,newurl);
}
现在运行,单击浏览器的返回按钮来查看URL是如何变化的。对于每个URL的变化,这是因为它存储了历史状态ID和相应的值。但是我们如何获得新的历史状态并在此基础上做一些事情呢我们需要添加一个事件监听器的popstate,这将触发一次历史变化的状态。

对于(i = 0;i < 5;i + +){
无功stateobject = {编号:我};
var;
无功newurl = / / /网址我真棒 / +我;
history.pushstate(stateobject,标题,newurl);
警报(一);
}

Window.addEventListener('popstate功能(事件){
readstate(事件。状态);
});

功能readstate(数据){
警报(数据id);
}
现在你会看到,当你点击返回按钮,一个popstate事件将被触发,事件监听器然后检索与历史状态对象关联的URL和提示ID.的价值

它很简单,很有趣,不是吗

tag:浏览器中电脑软件urlJavascript

相关内容