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

JavaScript013

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

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

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

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

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

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

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

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

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

小齐炖博士说的思路很对。有一点,在 Chrome 上我们可以使用 HTML5 的 localStorage 或 sessionStorage,和 cookie 的效果是一样的。

下面的代码在刷新的时候保持数字不变,但关闭浏览器后会还原。如果想要一直保存数据,要在 cookie 中设置 expires(Chrome 下使用 localStorage 替换 sessionStorage)。

完整测试代码:

<script type="text/javascript">

window.onload = function() {

// 数字到达 100 后还原为 1

var max = 100,

o = document.getElementById('abc')

var chrome = /chrome/i.test(navigator.userAgent)

// 获取保存的数据

if(chrome) {

data_num = sessionStorage.getItem("num") || ""

}

else {

data_num = document.cookie.replace(

/(?:(?:^|.*\s*)num\s*\=\s*((?:[^](?!))*[^]?).*)|.*/,

"$1")

}

var num_now = parseInt(data_num) || 0

o.innerHTML = num_now + 1

// 每 0.1 秒更新一次数字,并保存数据

setInterval(function() {

num_now = num_now >= max ? 1 : num_now + 1

o.innerHTML = num_now

if(chrome) {

sessionStorage.setItem("num", num_now)

}

else {

document.cookie = "num=" + num_now + "path=/"

}

}, 100)

}

</script> <span id="abc">1</span>