JS中利用localStorage防止頁面動態(tài)添加數(shù)據(jù)刷新后數(shù)據(jù)丟失

更新時間：2017年03月10日 11:44:39 作者：東都花神

本文給大家分享一段js代碼利用利用localStorage防止頁面動態(tài)添加數(shù)據(jù)刷新后數(shù)據(jù)丟失問題，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下

非常不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!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防止頁面動態(tài)添加數(shù)據(jù)刷新后數(shù)據(jù)丟失，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

three.js載入常用類型3D模型的幾種方法
通過Three.js的材質(zhì)和幾何體,我們可以很方便的創(chuàng)建基礎(chǔ)3D模型,下面這篇文章主要給大家介紹了關(guān)于three.js載入常用類型3D模型的幾種方法,需要的朋友可以參考下
2024-04-04
使用js正則表達(dá)式驗證文件擴展名方法實例
文件上傳時,為了安全驗證,對于手工改動文件后綴名產(chǎn)生的偽造文件進行判斷過濾,下面這篇文章主要給大家介紹了關(guān)于如何使用js正則表達(dá)式驗證文件擴展名的相關(guān)資料,需要的朋友可以參考下
2022-11-11
關(guān)于前端文件下載各類方式大匯總
這篇文章主要介紹了關(guān)于前端文件下載各類方式大匯總，具有很好的參考價值，希望對大家有所幫助。
2022-08-08
javascript sudoku 數(shù)獨智力游戲生成代碼
javascript sudoku 數(shù)獨智力游戲生成代碼，喜歡的朋友可以參考下。
2010-03-03
js的with語句使用方法
js的with語句使用方法...
2007-09-09
JCrop+ajaxUpload 圖像切割上傳的實例代碼
這篇文章主要介紹了JCrop+ajaxUpload 圖像切割上傳的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
微信小程序位置授權(quán)處理方法
這篇文章主要給大家介紹了關(guān)于微信小程序位置授權(quán)處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
JS實現(xiàn)表單驗證案例
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)表單驗證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
微信小程序頁面渲染實現(xiàn)方法
這篇文章主要介紹了微信小程序頁面渲染實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-11-11
詳解webpack引入第三方庫的方式以及注意事項
這篇文章主要介紹了詳解webpack引入第三方庫的方式以及注意事項，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01