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 相关文章推荐
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
Node.js Buffer用法解读
May 18 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
用javascript制作qq注册动态页面
Apr 14 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS中数组重排序方法
2016/11/11 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
代理人委托书
2014/08/01 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
运动会广播稿50字
2015/08/19 职场文书