用jQuery實現本地存儲，供大家參考，具體內容如下
- 要求:點擊提交按鈕，讓用戶輸入的內容分別加入到表格對應的列表中
- 要求:點擊每一行的刪除按鈕，能刪除當前行
- 要求:刷新頁面時能保留當前的頁面效果（數據狀態不會消失）
HTML結構
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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> |
初始化數據
|
1
2
3
4
5
6
7
8
9
10
11
|
// 初始化數據的作用:清空頁面存儲的內容恢復到原始狀態var arr = [{ 'username': '小紅', 'sex': '女', 'age': 24 }, { 'username': '小藍', 'sex': '男', 'age': 24 }] localStorage.setItem('data', JSON.stringify(arr)) |
入口函數
|
1
2
3
|
$(function () {//...以下所有代碼} |
按鈕綁定點擊事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$('#btn').click(function () { // var data = getData() // 綁定點擊事件 var obj = { // 獲取輸入框中的值 username: $('#username').val(), sex: $('#sex').val(), age: $('#age').val() } // 重新獲取數據 var data = getData() // 重新往本地添加數據 data.push(obj) // 存儲數據 setData(data) // 渲染到頁面 randerData() }) |
獲取本地存儲中的數據并把數據轉成復雜的數據類型
|
1
2
3
4
|
function getData() { // 獲取的是字符串類型,獲得數據,沒有數據返回為空數組 return JSON.parse(localStorage.getItem('data')) || [] } |
存儲data中的數據
|
1
2
3
4
|
function setData(data) { // 存儲數據并把復雜數據類型轉換成字符串類型 localStorage.setItem('data', JSON.stringify(data)) } |
封裝頁面渲染函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function randerData() { // 渲染前先清空列表 $('tbody').empty() // 獲取數據 var data = getData() // 遍歷data里面的對象元素,獲取對象元素里面的值 // item是數組里面的元素 data.forEach(function (item, i) { // 創建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) }) }// 頁面一打開就開始把本地存儲中的數據添加上去randerData() |
用事件委托給每個刪除鏈接綁定點擊刪除事件
|
1
2
3
4
5
6
7
8
9
|
// 不能直接獲取a$('tbody').on('click', 'a', function () {// 移除它的祖父元素tr$(this).parents('tr').remove() // 重新獲取數據 setData(data) // 重新渲染 randerData() }) |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_38007986/article/details/110821026
