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


Posted in Javascript onMarch 10, 2017

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

<!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防止页面动态添加数据刷新后数据丢失,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 #Javascript
js实现产品缩略图效果
Mar 10 #Javascript
BootStrap注意事项小结(五)表单
Mar 10 #Javascript
微信小程序 弹框和模态框实现代码
Mar 10 #Javascript
BootStrap表单宽度设置方法
Mar 10 #Javascript
Angular.js基础学习之初始化
Mar 10 #Javascript
js实现返回顶部效果
Mar 10 #Javascript
You might like
一个php作的文本留言本的例子(二)
2006/10/09 PHP
php 文件缓存函数
2011/10/08 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
幼教简历自我评价
2014/01/28 职场文书
陈欧的广告词
2014/03/18 职场文书
健康教育评估方案
2014/05/25 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2014年党总支工作总结
2014/12/18 职场文书
十二生肖观后感
2015/06/12 职场文书
运动会班级前导词
2015/07/20 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL