我的JavaScript回顾之路_07—0212—对象/localStorage和JSON数据/sessionStorage

最新推荐文章于 2023-03-20 12:33:32 发布

阿狸与含羞草111

最新推荐文章于 2023-03-20 12:33:32 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/zsqRr123456/article/details/79315015

版权

1、事件万物一切皆为对象

定义一个类（行为和属性）--->实例化

属性：这类共同拥有的东西行为：这类共同能做的事情

2、定义对象的方法（必须要把类实例化出来）

法1: 定义方法函数，函数添加带有属性和行为

function person(){this.say = () => {}} var myperson = new person(); myperson.say()

法2:定义一个对象，添加对象的属性和行为（不建议使用）

var myObj = new Object(); myObj.name=''; myObj.walk = () => {}; myObj.walk();

法3:健值对 key-value 主键唯一且不可重复（最常用的方法）

var myObject = {id:1, walk = function(){}, }; myObject.walk();

法4:定义一个类class（关键字）类名的首字母大写

class Person{

//构造方法
//对象被实例化时一定会调用
constructor(name, age){
this.name = name;
this.age = age;
}
watch(){
console.log(this.name + '在看《快乐大本营》')
}
}
var person1 = new Person('zzxx', 17);
person1.watch();
var person2 = new Person('xxzz', 18);
person2.watch();

3、localStorage

let localStorage = window.localStorage;

.setItem(key, value);//设置健值对
.getItem(key);//获取健值对key的value值
.clear();//清空

.removeItem(key);//移除

localStorage在没有对应key值的情况下，获取的值为null

var value = localStorage.getItem(key);

对象数组转换成JSON字符串 str = JSON.stringify(arr);

JSON字符串转换成对象数组 arr = JSON.parse(str);

$().html();

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
	<style>
		.top{overflow: hidden;}
		.top>div{float: left; padding: 2%;}
		.shopList span{width: 22%; display: inline-block}
		.shopDetails span{width: 22%; display: inline-block}
		.center{text-align: center;}
		.bottom{width:60%;}
	</style>
</head>
<body>
	<div class="top">
		<div>
			<div class="title">1商品名称：手机</div>
			<div>价格¥<span class="price">666</span></div>
			<div class="type">苹果6</div>
			<div><button class="join" index="0">加入购物车</button></div>	
		</div>	
		<div>
			<div class="title">2商品名称：手机</div>
			<div>价格¥<span class="price">888</span></div>
			<div class="type">苹果7</div>
			<div><button class="join" index="1">加入购物车</button></div>	
		</div>
		<div>
			<div class="title">3商品名称：手机</div>
			<div>价格：¥<span class="price">999</span></div>
			<div class="type">苹果8</div>
			<div><button class="join" index="2">加入购物车</button></div>	
		</div>
	</div>	
	<div class="bottom">
		<div class="shopList center">
			<span>商品名称</span>
			<span>价格</span>
			<span>类型</span>
			<span>数量</span>
		</div>
		<div class="aa">
			
		</div>
	</div>
	<script>
		// 定义一个对象的方法
		//法1 定义方法函数，函数里面带有属性和行为(方法里面可以function(){}--->() => {})
		function person(){
			this.name = 'Nancy';
			this.age = 16;
			this.say = () => {
				console.log(this.name + " 今天天气很好！")
			}
		}
		var myperson = new person();//必须将类实例化出来
		myperson.say();
		myperson.name = 'Lucy';
		myperson.say();
		myperson.watch = function(){
			console.log(this.name + '在看《欢乐喜剧人》')
		}
		myperson.watch();
		//法2 定义一个对象添加属性和行为（不建议使用）
		var myObj = new Object();
		myObj.id = 1;
		myObj.name = 'zzz';
		myObj.walk = () => {
			console.log(myObj.name + "正在散步。")
		}
		myObj.walk();
		//法3 健值对 key-value 主键唯一且不可重复（常用方法）
		var myObject = {
			id:1,
			name:'Lily',
			age:16,
			walk: function(){
				console.log(this.name + "在写代码");
			},
		};
		myObject.walk();
		//法4 定义一个类class，类名的首字母大写
		class Person{
			//构造方法
			//对象被实例化时一定会调用
			constructor(name, age){
				this.name = name;
				this.age = age;
			}
			watch(){
				console.log(this.name + '在看《快乐大本营》')
			}
		}
		var person1 = new Person('zzxx', 17);
		person1.watch();
		var person2 = new Person('xxzz', 18);
		person2.watch();
		console.log(myperson, myObj, myObject, person1, person2)
	</script>
	<script>
		// .setItem(key, value);//设置健值对
		// .getItem(key);//获取健值对key的value值
		// .clear();//清空
		// .removeItem(key);//移除
		//localStorage在没有对应key值的情况下，获取的值为null
		let localStorage = window.localStorage;
		$(function(){
			$(".join").on('click', function(){
				var index = $(this).attr("index");
				var arr = [];
				var obj = {
					index: index * 1,
					title: $($(".title")[index]).text(),
					price: $($(".price")[index]).text() * 1,
					type:  $($(".type")[index]).text(),
				};
				obj.num = 1;
				var value = localStorage.getItem('shopCart');
				if(value != null){//第一次直接将对象转换为字符串即可，第二次之后都需先将字符串转换为数组
					arr = JSON.parse(value);
				}
				arr.push(obj);
				//对象存入数组
				var newArr = [];
				//同一商品合并
				for(let i = 0; i < arr.length; i++)
				{
					for(let j = i + 1; j < arr.length; j++)
					{
						if(arr[i].title == arr[j].title && arr[i].price == arr[j].price && arr[i].type == arr[j].type)
						{
							arr.splice(j, 1);
							j = -1;
							arr[i].num++;
							break;
						}
						console.log(arr[i], arr[j])
					}
					newArr.push(arr[i]);
				}
				localStorage.setItem('shopCart', JSON.stringify(newArr));//将对象转换成字符串
				var showValue = localStorage.getItem('shopCart');
				if(showValue != null){
					var showArr = JSON.parse(showValue);
					var trHtml = '';
					for(let i = 0; i < showArr.length; i++)
					{
						trHtml += "<div class='shopDetails center'>" 
									+ "<span>" + showArr[i].title + "</span>" 
									+ "<span>价格：¥" + showArr[i].price + "</span>"
									+ "<span>" + showArr[i].type + "</span>"
									+ "<span class='num'>" + showArr[i].num + "</span>"
								  +"</div>";
					}
					$(".aa").html(trHtml);
				}	
			})
		})
	</script>
</body>
</html>

4、sessionStorage

关闭页面数据自动清空，使用同localStorage一样

localStorage需要清除浏览器数据

5、cookies

设置过期时间：把时间调至当前时间的前一天

长度限制

js代码量太大，不建议使用cookies

阿狸与含羞草111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的JavaScript回顾之路_07—0212—对象/localStorage和JSON数据/sessionStorage

1、事件万物一切皆为对象定义一个类（行为和属性）---&gt;实例化属性：这类共同拥有的东西行为：这类共同能做的事情2、定义对象的方法（必须要把类实例化出来）法1: 定义方法函数，函数添加带有属性和行为function person(){this.say = () =&gt; {}} var myperson = new person(); myperson.say()法...
复制链接

扫一扫