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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP调用三种数据库的方法(1)
2006/10/09 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
jQuery 白痴级入门教程
2009/11/11 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
Ajax基础知识详解
2017/02/17 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python深入学习之装饰器
2014/08/31 Python
python实现聊天小程序
2018/03/13 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
vscode调试django项目的方法
2020/08/06 Python
物业管理毕业生个人的求职信
2013/11/30 职场文书
初中家长寄语
2014/04/02 职场文书
简历自我评价模板
2015/03/11 职场文书
2015年班组工作总结
2015/04/20 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript