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查询DBpedia小应用实例学习
Mar 07 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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 intval的测试代码发现问题
2008/07/27 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Python应用库大全总结
2018/05/30 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python 模块导入问题汇总
2021/02/01 Python
国际商务专业学生个人的自我评价
2013/09/28 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
商场收银员岗位职责
2015/04/07 职场文书
婚姻出轨保证书
2015/05/08 职场文书
php引用传递
2021/04/01 PHP
详解MySQL的内连接和外连接
2023/05/08 MySQL