jQuery實現(xiàn)本地存儲

更新時間：2020年12月22日 10:40:26 作者：李大璟

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)本地存儲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

用jQuery實現(xiàn)本地存儲，供大家參考，具體內(nèi)容如下

要求:點擊提交按鈕，讓用戶輸入的內(nèi)容分別加入到表格對應的列表中
要求:點擊每一行的刪除按鈕，能刪除當前行
要求:刷新頁面時能保留當前的頁面效果（數(shù)據(jù)狀態(tài)不會消失）

HTML結構

<div style="margin-bottom: 15px;">
    <input type="text" id="username" placeholder="請輸入姓名">
    <input type="text" id="sex" placeholder="請輸入性別">
    <input type="text" id="age" placeholder="請輸入年齡">
    <input type="button" value="提交" id="btn">
  </div>
  <table border="1" width="540">
    <thead>
      <tr>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>


    </tbody>
</table>

初始化數(shù)據(jù)

// 初始化數(shù)據(jù)的作用:清空頁面存儲的內(nèi)容恢復到原始狀態(tài)
var arr = [{
      'username': '小紅',
      'sex': '女',
      'age': 24
    }, {
      'username': '小藍',
      'sex': '男',
      'age': 24
    }]
    localStorage.setItem('data', JSON.stringify(arr))

入口函數(shù)

$(function () {
//...以下所有代碼
}

按鈕綁定點擊事件

$('#btn').click(function () {
        // var data = getData()
        // 綁定點擊事件
        var obj = {
          // 獲取輸入框中的值
          username: $('#username').val(),
          sex: $('#sex').val(),
          age: $('#age').val()
        }
        // 重新獲取數(shù)據(jù)
        var data = getData()
        // 重新往本地添加數(shù)據(jù)
        data.push(obj)
        // 存儲數(shù)據(jù)
        setData(data)
        // 渲染到頁面
        randerData()

      })

獲取本地存儲中的數(shù)據(jù)并把數(shù)據(jù)轉成復雜的數(shù)據(jù)類型

function getData() {
        // 獲取的是字符串類型,獲得數(shù)據(jù),沒有數(shù)據(jù)返回為空數(shù)組
        return JSON.parse(localStorage.getItem('data')) || []
      }

存儲data中的數(shù)據(jù)

function setData(data) {
        // 存儲數(shù)據(jù)并把復雜數(shù)據(jù)類型轉換成字符串類型
        localStorage.setItem('data', JSON.stringify(data))
      }

封裝頁面渲染函數(shù)

function randerData() {
        // 渲染前先清空列表
        $('tbody').empty()
        // 獲取數(shù)據(jù)
        var data = getData()
        // 遍歷data里面的對象元素,獲取對象元素里面的值
        // item是數(shù)組里面的元素
        data.forEach(function (item, i) {
          // 創(chuàng)建tr
          var tr = '<tr><td>' + item.username + '</td><td>' + item.sex + '</td><td>' + item.age + '</td><td><a href="javascript:;" rel="external nofollow" >刪除</a></td></tr>'
          // 在主體的末尾中添加tr
          $('tbody').append(tr)
        })
      }
// 頁面一打開就開始把本地存儲中的數(shù)據(jù)添加上去
randerData()

用事件委托給每個刪除鏈接綁定點擊刪除事件

// 不能直接獲取a
$('tbody').on('click', 'a', function () {
// 移除它的祖父元素tr
$(this).parents('tr').remove()
 // 重新獲取數(shù)據(jù)
 setData(data)
 // 重新渲染
 randerData()
 })