localStorage本地存储案例

LocalStorage的用法:
https://www.jianshu.com/p/39ba41ead42e

例子:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title></title>
	<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<input type="text" id="name" value="" /><br />
<input type="text" id="age" value="" /><br />
<button id="read">读取</button>
<button id="clear">清除储存</button>
<div id="local"></div>

<script type="text/javascript">
	$(function(){
		$('#read').bind('click',function(){
			var name = $('#name').val();
			var age = $('#age').val();
			localStorage.setItem('name',name);
			localStorage.setItem('age',age);
			$('#local').text(localStorage.getItem('name')+'---'+localStorage.getItem('age'));
		});
		$('#clear').bind('click',function(){
			localStorage.clear(); 
			$('#local').text(localStorage.getItem('name')+'---'+localStorage.getItem('age'));
		});
	});
</script>
</body>
</html>

效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

好的,下面是一个简单的使用本地存储的购物车案例: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <script type="text/javascript"> // 初始化购物车 if (!localStorage.getItem('cart')) { localStorage.setItem('cart', JSON.stringify({})); } // 添加商品到购物车 function addToCart(id, name, price, qty) { var cart = JSON.parse(localStorage.getItem('cart')); if (!cart[id]) { cart[id] = {name: name, price: price, qty: qty}; } else { cart[id].qty += qty; } localStorage.setItem('cart', JSON.stringify(cart)); } // 显示购物车 function showCart() { var cart = JSON.parse(localStorage.getItem('cart')); var items = Object.keys(cart).map(function(key) { var item = cart[key]; return '<li>' + item.name + ' - ¥' + item.price + ' × ' + item.qty + '</li>'; }); document.getElementById('cart-items').innerHTML = items.join(''); } </script> </head> <body onload="showCart()"> <h1>购物车</h1> <ul id="cart-items"></ul> <hr> <h2>商品列表</h2> <ul> <li> 商品1 - ¥100 <button onclick="addToCart(1, '商品1', 100, 1)">加入购物车</button> </li> <li> 商品2 - ¥200 <button onclick="addToCart(2, '商品2', 200, 1)">加入购物车</button> </li> <li> 商品3 - ¥300 <button onclick="addToCart(3, '商品3', 300, 1)">加入购物车</button> </li> </ul> </body> </html> ``` 该例子中,我们使用了 localStorage 来储存购物车中的商品信息。在页面加载时,我们使用 `localStorage.getItem('cart')` 获取购物车信息。如果购物车信息不存在,我们通过 `localStorage.setItem('cart', JSON.stringify({}))` 初始化购物车信息为一个空对象。 当用户点击“加入购物车”按钮时,我们将商品信息添加到购物车中。我们通过 `JSON.parse(localStorage.getItem('cart'))` 获取购物车信息,然后根据商品 ID 判断该商品是否已经存在于购物车中。如果不存在,则添加一个新的条目,否则增加该商品的数量。最后,我们使用 `localStorage.setItem('cart', JSON.stringify(cart))` 更新购物车信息。 在页面加载和添加商品到购物车后,我们调用 `showCart()` 函数来显示购物车中的商品列表。该函数首先获取购物车信息,并根据购物车中的每个条目生成一个列表项。最后,我们使用 `document.getElementById('cart-items').innerHTML = items.join('')` 将列表项添加到页面中。 希望这个例子能够帮助你理解如何使用本地存储来实现购物车功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值