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 function对象那些迷惑分析
Oct 24 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
小程序实现单选多选功能
Nov 04 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
design vue 表格开启列排序的操作
Oct 28 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中实现记住密码自动登录的代码
2011/03/02 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
基于python中theano库的线性回归
2018/08/31 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Jupyter加载文件的实现方法
2020/04/14 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
《金钱的魔力》教学反思
2014/02/24 职场文书
党务公开方案
2014/05/06 职场文书
新闻发布会策划方案
2014/06/12 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书