这篇文章主要讲解了“如何使用HTML5的localStorage对象”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用HTML5的localStorage对象”吧！
在Bootstrap中，如果刷新页面，则选项卡将重置为默认设置。但是，您可以使用HTML5localStorage对象在浏览器中本地保存当前选项卡的某些参数，然后取回该参数以重新加载页面上选择的最后一个活动选项卡。
让我们尝试以下示例以了解其基本工作原理：
例试试这个代码»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keep Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
</head>
<body>
<div class="m-3">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#sectionA" class="nav-link active" data-toggle="tab">Section A</a>
</li>
<li class="nav-item">
<a href="#sectionB" class="nav-link" data-toggle="tab">Section B</a>
</li>
<li class="nav-item">
<a href="#sectionC" class="nav-link" data-toggle="tab">Section C</a>
</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade show active">
<h4>Section A</h4>
<p>Aliquip placeat salvia cillum iphone...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h4>Section B</h4>
<p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h4>Section C</h4>
<p>Nullam hendrerit justo non leo aliquet...</p>
</div>
</div>
</div>
</body>
</html>
感谢各位的阅读，以上就是“如何使用HTML5的localStorage对象”的内容了，经过本文的学习后，相信大家对如何使用HTML5的localStorage对象这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
