JS中利用localStorage防止页面动态添加数据刷新后数据丢失

非常不多说了，直接给大家贴代码了，具体代码如下所示：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
 <ul>
  <li>555</li>
  <li>555</li>
  <li>555</li>
  <li>555</li>
 </ul>
 <button>button</button>
 <script type="text/javascript">
  var arrary_li = document.querySelectorAll("li");
  var num;
  $('button').on('click', function () {
    $('li').last().addClass('active')
    for (var i = 0; i < arrary_li.length; i++) {
     if (arrary_li[i].className === 'active') {
      num = i;
     }
    }
    localStorage.setItem('num', num)
    location.reload()
  })
  var getNum = parseInt(localStorage.getItem('num'));
  $('li').eq(getNum).addClass('active');
 </script>
</body>
</html>

以上所述是小编给大家介绍的JS中利用localStorage防止页面动态添加数据刷新后数据丢失，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS localStorage实现本地缓存的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>本地缓存</title>     <script type="text/javascript">         var strKey = "strKey";        

  • 移动端使用localStorage缓存Js和css文的方法(web开发)

    移动端使用localStorage缓存Js和css文的方法(web开发)

    将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能: <script type="text/javascript"> //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { add

  • cookie解决微信不能存储localStorage的问题

    在开发基于微信的Web页面时,发现有些机型不能存储信息到localStorage中,或者是页面一旦关闭,存储的信息也失效了. 用cookie来替代localStorage,存储一些简单的数据.上网查找了一下,发现w3school上已有不错的解决方案. 设置cookie: function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) do

  • 使用jquery读取html5 localstorage的值的方法

    在HTML 5中,localstorage是个不错的东西,在支持localstorage的浏览器中, 能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器访问,也能读出其值, 下面给出的例子是使用jquery 在每次表单加载的时候,读localstorage的值,而在表单每次提交时则清楚其值的例子 首先是一个表单: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • 详解JavaScript中localStorage使用要点

    详解JavaScript中localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题. localStorage有以下几个特点 1.localStorage是一个普通对象,任何对象的操作都适用. 2.localStorage对象的属性值只能是字符串. 这个需要特别注意了,假设我们要保存一个对象到localStorage中,可以使用拼接的方式.如 var obj = { "na=me": "chua", age: 9 } //拼接到

  • 本地存储localStorage用法详解

    一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 二.localStorage的优势与局限 localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可

  • 在localStorage中存储对象数组并读取的方法

    频繁ajax请求导致页面响应变慢.于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求. 鉴于localstorage中只能存储字符串,所以我们要借助于JSON.stringify()和JSON.parse(); $.ajax({ type: "get", async: "true", url: "", data: {}, dataType: "jsonp", success: func

  • 用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果

    研究了一上午,终于做出了,实时获取本地localStorage来模拟注册登入~~~ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>我们虽然很穷,但是我们有梦想</title> <script src="angular.js"></script> </he

  • 利用php实现一周之内自动登录存储机制（cookie、session、localStorage）

    cookie.session.localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧. 1.cookie用来存储用户相关数据,存储的位置在用户本地: 首先是登录界面定义: <form action="server.php" method="post"> <input type="text" name="username" class=&qu

  • android webview 中localStorage无效的解决方法

    我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀? 网上搜了好多都没效果 复制代码 代码如下: mainWebView = (WebView)this.findViewById(R.id.mainWebView);         WebSettings settings = mainWebView.getSettings();         settings.setJavaScriptEnabled(true);         setting

随机推荐