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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
jQuery textarea的长度进行验证
May 06 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
Vue使用NProgress进度条的方法
Sep 21 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/02 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php微信公众号开发模式详解
2016/11/28 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
javascript实现留言板功能
2020/02/08 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
Django中几种重定向方法
2015/04/28 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python使用贪婪算法解决问题
2019/10/22 Python
机械工程师求职自我评价
2013/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
python全面解析接口返回数据
2022/02/12 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android