jQuery实现本地存储


Posted in jQuery onDecember 22, 2020

用jQuery实现本地存储,供大家参考,具体内容如下

  • 要求:点击提交按钮,让用户输入的内容分别加入到表格对应的列表中
  • 要求:点击每一行的删除按钮,能删除当前行
  • 要求:刷新页面时能保留当前的页面效果(数据状态不会消失)

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>

初始化数据

// 初始化数据的作用:清空页面存储的内容恢复到原始状态
var arr = [{
      'username': '小红',
      'sex': '女',
      'age': 24
    }, {
      'username': '小蓝',
      'sex': '男',
      'age': 24
    }]
    localStorage.setItem('data', JSON.stringify(arr))

入口函数

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

按钮绑定点击事件

$('#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()

      })

获取本地存储中的数据并把数据转成复杂的数据类型

function getData() {
        // 获取的是字符串类型,获得数据,没有数据返回为空数组
        return JSON.parse(localStorage.getItem('data')) || []
      }

存储data中的数据

function setData(data) {
        // 存储数据并把复杂数据类型转换成字符串类型
        localStorage.setItem('data', JSON.stringify(data))
      }

封装页面渲染函数

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()

用事件委托给每个删除链接绑定点击删除事件

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

jQuery实现本地存储

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
You might like
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
python列表的常用操作方法小结
2016/05/21 Python
python fabric实现远程部署
2017/01/05 Python
python监控键盘输入实例代码
2018/02/09 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
如何写python的配置文件
2020/06/07 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
使用refresh_token实现无感刷新页面
2022/04/26 Javascript