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字典探测用户名工具
Oct 05 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
Vue中computed与methods的区别详解
Mar 24 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爆绝对路径方法收集整理
2012/09/17 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
Smarty保留变量用法分析
2016/05/23 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
领导视察欢迎词
2014/01/15 职场文书
人事文员岗位职责
2014/02/16 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
无房证明样本
2015/06/17 职场文书
Python绘画好看的星空图
2022/03/17 Python