快捷導(dǎo)航

jQuery實(shí)現(xiàn)本地存儲(chǔ)

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

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

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

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

HTML結(jié)構(gòu)

<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ù)的作用:清空頁面存儲(chǔ)的內(nèi)容恢復(fù)到原始狀態(tài)
var arr = [{
      'username': '小紅',
      'sex': '女',
      'age': 24
    }, {
      'username': '小藍(lán)',
      'sex': '男',
      'age': 24
    }]
    localStorage.setItem('data', JSON.stringify(arr))

入口函數(shù)

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

按鈕綁定點(diǎn)擊事件

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

      })

獲取本地存儲(chǔ)中的數(shù)據(jù)并把數(shù)據(jù)轉(zhuǎn)成復(fù)雜的數(shù)據(jù)類型

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

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

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

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

function randerData() {
        // 渲染前先清空列表
        $('tbody').empty()
        // 獲取數(shù)據(jù)
        var data = getData()
        // 遍歷data里面的對(duì)象元素,獲取對(duì)象元素里面的值
        // 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)
        })
      }
// 頁面一打開就開始把本地存儲(chǔ)中的數(shù)據(jù)添加上去
randerData()

用事件委托給每個(gè)刪除鏈接綁定點(diǎn)擊刪除事件

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