JS中利用localStorage防止页面动态添加数据刷新后数据丢失
更新时间：2017年03月10日 11:44:39 作者：东都花神
本文给大家分享一段js代码利用利用localStorage防止页面动态添加数据刷新后数据丢失问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
非常不多说了，直接给大家贴代码了，具体代码如下所示：
<!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防止页面动态添加数据刷新后数据丢失，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
- 使用jquery读取html5 localstorage的值的方法
- JavaScript使用localStorage存储数据
- JS 中LocalStorage和SessionStorage的使用
- JS中LocalStorage与SessionStorage五种循序渐进的使用方法
- JS实现本地存储信息的方法(基于localStorage与userData)
- localStorage的黑科技-js和css缓存机制
- JavaScript中localStorage对象存储方式实例分析
- 移动端使用localStorage缓存Js和css文的方法(web开发)
- 详解JavaScript中localStorage使用要点
- Javascript 计算字符串在localStorage中所占字节数
- JS localStorage实现本地缓存的方法
- JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
相关文章
通过Three.js的材质和几何体,我们可以很方便的创建基础3D模型,下面这篇文章主要给大家介绍了关于three.js载入常用类型3D模型的几种方法,需要的朋友可以参考下2024-04-04
文件上传时,为了安全验证,对于手工改动文件后缀名产生的伪造文件进行判断过滤,下面这篇文章主要给大家介绍了关于如何使用js正则表达式验证文件扩展名的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了关于前端文件下载各类方式大汇总，具有很好的参考价值，希望对大家有所帮助。2022-08-08
javascript sudoku 数独智力游戏生成代码，喜欢的朋友可以参考下。2010-03-03
js的with语句使用方法...2007-09-09
这篇文章主要介绍了JCrop+ajaxUpload 图像切割上传的实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要给大家介绍了关于微信小程序位置授权处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了JS实现表单验证案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了详解webpack引入第三方库的方式以及注意事项，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论