用JS怎么实现刷新页面后保留刷新前的页面上的数据显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS怎么实现刷新页面后保留刷新前的页面上的数据显示相关的知识,希望对你有一定的参考价值。

例如流量统计此类页面,刷新后页面会重新获取一次新的流量值,我想保留并读取刷新前的数据,这个要怎么实现,用JS

页面本身是不具备保存历史数据的功能的,需要借助其它手段来实现,常用方法如下:

    异步更新页面。这种方法实际上页面是没有刷新的,通过AJAX导步获取信息来更新页面,这样可以保留原页面需要保留的数据。一些网站的发表评论后,评论内容更新,用的就是这个方法。

    使用COOKIE保存。把需要保存的数据存储到COOKIE中,页面更新时,读取COOKIE渲染到页面上。比较常见的如:登录框记录用户名,下次登录无须重新输入。但COOKIE存储的数据量有限,不适合大的数据存储。

    服务器端保存数据。与COOKIE保存类似,只不过内容是保存在服务器端,利用会话机制在页面更新时从服务器读取内容重新渲染。这是一种常见的而保险的方法。像一些文本编辑器,保存草稿等,就是通过这样的方式实现的

参考技术A 用对象保存 必要的时候持久化追问

能麻烦你详细说一下么=-=

参考技术B 可以把旧值存放到request中保存!追问

请问有一些范例不。。

追答

eg: int old=100;
request.setAttribute("old");//存值 使用关键字 ‘old’

int getOld=request.getAttribute("old");//取值 一定使用关键字old’获取
不知道能帮上你,good luck for you!

参考技术C localStorage,sessionStorage

页面刷新后如何让JS变量保留值? [复制]

【中文标题】页面刷新后如何让JS变量保留值? [复制]【英文标题】:How to get JS variable to retain value after page refresh? [duplicate] 【发布时间】:2013-04-18 20:24:10 【问题描述】:

是否可以永久更改 javascript 变量?如,如果我设置变量 X 并使其等于 1。然后单击按钮将该变量更改为 2。如何让该变量在页面刷新时保持为 2?

【问题讨论】:

【参考方案1】:

这可以通过window.localStoragewindow.sessionStorage 实现。不同之处在于,sessionStorage 会在浏览器保持打开状态时持续存在,localStorage 在浏览器重新启动后仍然存在。持久性适用于整个网站,而不仅仅是其中的一个页面。

当您需要设置应在下一页中反映的变量时,请使用:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

在任何页面中(比如页面加载时),获取它:

var someVarName = localStorage.getItem("someVarKey");

.getItem() 将返回 null 如果没有存储值,或者存储的值。

请注意,只有字符串值可以存储在此存储中,但这可以通过使用JSON.stringifyJSON.parse 来解决。从技术上讲,每当您调用 .setItem() 时,它都会调用 .toString() 并存储该值。

MDN 的 DOM 存储指南(链接如下)有变通方法/polyfill,如果 localStorage 不可用,最终会退回到 cookie 之类的东西。

使用现有的或创建自己的迷你库并不是一个坏主意,它抽象了保存任何数据类型(如对象文字、数组等)的能力。


参考资料:

浏览器Storage - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage JSON - https://developer.mozilla.org/en-US/docs/JSON 浏览器存储兼容性 - http://caniuse.com/namevalue-storage 存储对象 - Storing Objects in HTML5 localStorage

【讨论】:

localStorage 在 iOS 设备中似乎无法在隐私浏览模式下工作。参考 [***.com/questions/14555347/… @lan JSON.stringify 没有保留我们的功能,我们该如何解决? 是的,没有魔法..只需使用本地存储【参考方案2】:

除了 cookie 和 localStorage,至少还有一个地方可以存储“半永久”客户端数据:window.name。您分配给window.name 的任何字符串值都将保留在那里,直到窗口关闭。

要测试它,只需打开控制台并输入window.name = "foo",然后刷新页面并输入window.name;它应该回复foo

这有点小题大做,但是如果您不希望在每次请求时都将填充了不必要数据的 cookie 发送到服务器,并且无论出于何种原因(旧客户端)都不能使用 localStorage,这可能是一个可以考虑的选择。

window.name 有另一个有趣的属性:它对其他域提供的窗口可见;它不像window 的几乎所有其他财产一样受制于同源政策。因此,除了在用户导航或刷新页面时在其中存储“半持久”数据外,您还可以将其用于无 CORS 的跨域通信。

请注意,window.name 只能存储字符串,但由于 JSON 的广泛可用性,即使对于复杂的数据,这也应该不是什么大问题。

【讨论】:

我看到你偷偷溜进来...***.com/questions/10567847/… :) @Ian 大声笑,很好。我不知道为什么,但我有点着迷window.name 我现在很感兴趣!这一切听起来都很熟悉,但我不确定我是否知道这个功能。我知道将name 设置为window.open,但这是我所接受的范围 在我的场景中,该参数不能跨选项卡或浏览器窗口持续存在,只能跨当前打开窗口中的页面调用。为此,window.name 完美!【参考方案3】:

您必须使用 cookie 来存储页面刷新时的值。您可以使用许多基于 javascript 的 cookie 库中的任何一个来简化 cookie 访问,例如 this one

如果你只想支持 html5 那么你可以考虑Storage api like localStorage/sessionStorage

例如:使用localStorage 和cookies library

var mode = getStoredValue('myPageMode');

function buttonClick(mode) 
    mode = mode;
    storeValue('myPageMode', mode);


function storeValue(key, value) 
    if (localStorage) 
        localStorage.setItem(key, value);
     else 
        $.cookies.set(key, value);
    


function getStoredValue(key) 
    if (localStorage) 
        return localStorage.getItem(key);
     else 
        return $.cookies.get(key);
    

【讨论】:

【参考方案4】:

您可以通过在客户端存储 cookie 来做到这一点。

【讨论】:

以上是关于用JS怎么实现刷新页面后保留刷新前的页面上的数据显示的主要内容,如果未能解决你的问题,请参考以下文章

刷新页面后怎么让js定时器继续刷新前的状态继续计时

用js操作 怎样 实现刷新当前页面 而 不改变请求头的referer 值

用js实现关闭或刷新页面时提示保存更改信息

怎么刷新页面后,js就不执行了

ajax提交数据以后刷新当前页面,怎么实现

JS页面 如何实现刷新指定DIV?