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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 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分页类代码
2013/04/02 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
点击广告后才能获得下载地址
2006/10/26 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python self用法详解
2020/11/28 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
公司新年寄语
2014/04/04 职场文书
实验心得体会
2014/09/05 职场文书
给校长的一封检讨书
2014/09/20 职场文书
我的中国梦主题班会
2015/08/14 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js