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获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
Vue组件的使用及个人理解与介绍
Feb 09 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP学习笔记之一
2011/01/17 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
人事任命通知
2015/04/20 职场文书
民事调解协议书
2016/03/21 职场文书