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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
javascript编程起步(第五课)
Feb 27 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
js实现列表向上无限滚动
Jan 13 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python中的for循环
2018/09/28 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
新年主持词
2014/03/27 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
金融专业求职信
2014/08/05 职场文书
爱牙日活动总结
2014/08/29 职场文书
学习型党组织心得体会
2014/09/12 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
员工工作能力评语
2014/12/31 职场文书
奖学金感谢信
2015/01/21 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang
利用Redis实现点赞功能的示例代码
2022/06/28 Redis