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事件串连执行多个处理过程的方法
Mar 09 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
npm全局环境变量配置详解
Dec 15 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 CKEditor 上传图片实现代码
2009/11/06 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python检测网络延迟的代码
2018/05/15 Python
Python装饰器知识点补充
2018/05/28 Python
python实现定时提取实时日志程序
2018/06/22 Python
基于Python的PIL库学习详解
2019/05/10 Python
详解Python打包分发工具setuptools
2019/08/05 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python3 集合set入门基础
2020/02/10 Python
Python netmiko模块的使用
2020/02/14 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
班长竞选演讲稿
2014/04/24 职场文书
任命书模板
2014/06/04 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书