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 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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 常用函数库和一些实用小技巧
2009/01/01 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
js 操作符实例代码
2009/10/24 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
js实现表格字段排序
2014/02/19 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python求crc32值的方法
2014/10/05 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
单位成立周年感言
2014/01/26 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python