js localStorage本地存储json对象并追加数据 |
您所在的位置：网站首页 › 给localstorage添加过期机制 › js localStorage本地存储json对象并追加数据 |
js localStorage本地存储json对象并追加数据
|
记录一下 localStorage的更过相关知识可以去：http://www.w3school.com.cn/html5/html_5_webstorage.asp 这里主要是讲 localStorage存储对象的时候追加数据并不会覆盖原有的数据，下面写了个小demo table{ width: 300px; border: 1px #000 solid; } td,th{ border: 1px #000 solid; } 姓名： 年龄： 性别： 提交 学生信息 姓名 年龄 性别 // localStorage.removeItem('data'); //清除本地存储 var jsonData = JSON.parse(localStorage.getItem('data')); console.log(jsonData); if(!jsonData){ jsonData = []; } else{ // 初始化 show(); } function btn(){ if(!$(".name").val() || !$(".age").val() || !$(".sex").val()){ alert("数据不能有空档"); } else{ jsonData.push({ name:$(".name").val(), age:$(".age").val(), sex:$(".sex").val() }); console.log(jsonData); $(".name").val(""); $(".age").val(""); $(".sex").val(""); localStorage.setItem('data',JSON.stringify(jsonData)); $(".tt").empty(); show(); } } // DOM数据到表格上 function show(){ for(key in jsonData){ $(".tt").append(` ${jsonData[key].name} ${jsonData[key].age} ${jsonData[key].sex} `); } }效果图如下 |
【本文地址】
今日新闻 |
推荐新闻 |