js localStorage本地存储json对象并追加数据

最新推荐文章于 2024-06-27 20:21:48 发布
最新推荐文章于 2024-06-27 20:21:48 发布
阅读量7.7k 收藏 10
点赞数 3
分类专栏： web前端 javascript jquery 文章标签： localStorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39644462/article/details/83856568
版权
web前端 同时被 3 个专栏收录
26 篇文章 0 订阅
订阅专栏
javascript
12 篇文章 0 订阅
订阅专栏
jquery
4 篇文章 0 订阅
订阅专栏

记录一下
localStorage的更过相关知识可以去：http://www.w3school.com.cn/html5/html_5_webstorage.asp
这里主要是讲 localStorage存储对象的时候追加数据并不会覆盖原有的数据，下面写了个小demo
 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
	<title></title>
	<style>
		table{
			width: 300px;
			border: 1px #000 solid;
		}
		td,th{
			border: 1px #000 solid;
		}
	</style>
</head>
<body>
	姓名：<input type="text" class="name" placeholder="姓名"><br>
	年龄：<input type="text" class="age" placeholder="年龄"><br>
	性别：<input type="text" class="sex" placeholder="性别"><br><br>
	<button class="top" onclick="btn()">提交</button>
	<hr>
	<table>
		<caption>学生信息</caption>
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
		<tbody class="tt">
		</tbody>
	</table>
</body>
<script type="text/javascript">
	// 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(`
				<tr>
					<td>${jsonData[key].name}</td>
					<td>${jsonData[key].age}</td>
					<td>${jsonData[key].sex}</td>
				</tr>
			`);
		}
	}	
</script>
</html>

效果图如下

攻城狮YanGo
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
12-09
非常不多说了，直接给大家贴代码了，具体代码如下所示： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
12-14
思路：既然localStorage只能存储字符串数据，那么我们就可以先把JSON对象转换成字符串，然后用localStorage方法存储起来；等到需要用到这些JSON数据时，先把它们读取出来，然后再转换成JSON对象加以利用。 具体代码...
localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
wdbsrl的博客
04-15 369
[javascript] view plain copy  print? localStorage.setItem("key","value");//存储变量名为key，值为value的变量       localStorage.key = "value"//存储变量名为key，值为value的变量       localStorage.getItem("key
Javascript：本地存储之localStorage
最新发布
听海边涛声
06-27 899
Javascript：本地存储之localStorage
详解JavaScript中localStorage使用要点
零落依草木的博客
08-08 796
localStorage主要用来替代cookie，解决cookie(可参考cookie使用要点)读写困难、容量有限的问题，对js localstorage的使用相关知识感兴趣的朋友一起学习吧 localStorage主要用来替代cookie，解决cookie(可参考cookie使用要点)读写困难、容量有限的问题。 localStorage有以下几个特点 1.l
本地存储localStorage的增添与删除(设置与获取)
牛牪犇
09-24 1425
添加localStorage.getItem(key) 获取拿值 localStorage.setItem(“key”,key) 删除键值对(清除单个值)：localStorage.removeItem(key) 清除所有键值对：localStorage.clear()
js中给json对象添加新的属性
热门推荐
mdjfk的博客
09-06 2万+
1、现有一个json对象为jsonObj，需要给这个对象添加新的属性newParam，同时给newParam赋值为pre。做法如下： var jsonObj={       'param1':22,       'param2' :33 }; jsonObj. newParam ='pre'; 新的属性添加以后，json对象变成： var jsonObj={       'para...
在localStorage中存储对象数组并读取的方法
11-23
存储完成后，当我们需要从`localStorage`中读取数据时，需要先将存储的字符串还原为JavaScript对象。这可以通过`JSON.parse()`方法实现。在`getData`函数中，首先将存储在`localStorage`中的字符串`job`取出，然后...
Vue使用localStorage存储数据的方法
12-11
在前端开发中，Vue.js 是一个非常流行的轻量级JavaScript框架，它提供了高效的数据绑定和组件化功能。在实际应用中，我们常常需要在用户浏览器端存储数据，以实现页面刷新后数据的持久化。`localStorage`是Web ...
JS实现本地存储信息的方法(基于localStorage与userData)
10-20
在JavaScript中，本地存储数据的需求常常出现，特别是在Web应用程序中，需要在用户关闭浏览器后仍然保留某些信息，例如用户的偏好设置、游戏进度等。传统的Cookie虽然可以实现这个功能，但它存在容量限制（一般为4...
JavaScript使用localStorage存储数据
10-16
主要为大家详细介绍了JavaScript使用localStorage存储数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS localStorage存储对象，sessionStorage存储数组对象操作示例
10-15
主要介绍了JS localStorage存储对象，sessionStorage存储数组对象操作,结合实例形式详细分析了JS使用localStorage存储对象以及sessionStorage存储数组对象相关操作技巧与注意事项,需要的朋友可以参考下
html5中localStorage本地存储的简单使用
09-28
这个例子中，我们设置了、获取了、删除了以及清除了localStorage中的数据，并且将一个JSON对象存储和读取了出来。 使用localStorage需要注意的是，由于数据存储在客户端，因此涉及敏感信息时要谨慎使用，避免数据...
JavaScript中localStorage对象存储方式实例分析
01-19
本文实例讲述了JavaScript中localStorage对象存储方式。分享给大家供大家参考，具体如下： [Local storage limitations]文章中提及JavaScript里的local storge的限制，例子中在localStorage里存储了一个bool型的数据...
详解HTML5 LocalStorage 本地存储
09-28
本篇文章主要介绍了HTML5 LocalStorage 本地存储 ，HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。有兴趣的可以了解一下。
HTML5 LocalStorage 本地存储详细概括（多图）
09-27
LocalStorage的引入旨在统一各种浏览器间的本地数据存储方式，如IE的userData、Flash对象等。它提供了一个易于使用的API，使得开发者可以方便地进行数据的读取、写入和删除操作。 在HTML5中，LocalStorage通过...
localStorage存储对象
cyx233333的博客
09-12 212
localStorage存储对象
JS使用localStorage和sessionStorage存储数据到页面
qq_44001404的博客
04-22 790
JS使用localStorage和sessionStorage存储数据到页面
LocalStorage存储JSON对象的问题
LLDD2014425程序猿
07-25 1290
1、localStorage - 没有时间限制的数据存储 var arr=[1,2,3]; localStorage.setItem("temp",arr); //会返回1,2,3 console.log(typeof localStorage.getItem("temp"));//string console.log(localStorage.getItem("temp"));//1,2,3
在localstorage中存储对象数组并读取的方法
09-10
在localStorage中存储对象数组并读取的方法如下： 1. 存储对象数组： 首先，将对象数组转化为字符串，可以使用JSON.stringify()方法将对象数组转化为字符串形式。然后，使用localStorage.setItem()方法将该字符串...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值