localstorage实现购物车案例
localstorage实现购物车案例
- localstorage
-
- localStorage存取功能的基本实现
- 商品页面实现
- 购物车页功能实现
localstorage
//本地存储 永久存储 存 值为字符串 取 值为字符串
//localStorage
//增删改查
//增
//localStorage.setItem("username","admin");
//改
//localStorage.setItem("username","admin111"); //同名会覆盖
//查
//let val = localStorage.getItem("username");
//删
//localStorage.removeItem("username");
localStorage存取功能的基本实现
let obj = {
name:"john"};
let obj = localStorage.setItem("username","admin");
//将json格式的对象转换成json格式的字符串
let str = JSON.stringify(obj);
//将json格式的字符串存入localstorage中
localStorage.setItem("obj",str);
//将localStorage中的数据提取出来（字符串格式）
let str1 = localStorage.getItem("obj");
//将json格式的字符串转换成json对象
let obj1 = JSON.parse(str1);
商品页面实现
至此localstorage的增删改查已经实现，下面实现基本商品列表页
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<style>
input{
border: 2px firebrick solid;
color: #ffffff;
width: 250px;
height: 30px;
text-align: center;
line-height: 30px;
}
li{
width: 250px;
height: 300px;
border: solid 1px #cecece;
list-style: none;
margin: 0 10px;
}
ul{
display: block;
display: flex;
/* justify-content: space-between; */
}
img{
width: 250px;
}
p{
display: flex;
justify-content: space-between;
}
style>
<body>
<h4>
<a href="gouwuc.html">购物车
<span class="shuliang">0span>
a>
h4>
<ul class="ul">
ul>
<div class="car">
div>
body>
<script>
var st = [
{
"id":1,
"url":"./img/yifu1.jpg",
"jiage":"100"
},
{
"id":2,
"url":"./img/yifu2.jpg",
"jiage":"200"
},
{
"id":3,
"url":"./img/yifu3.jpg",
"jiage":"300"
},
{
"id":4,
"url":"./img/yifu4.jpg",
"jiage":"400"
}
]
var str = JSON.stringify(st);
localStorage.setItem("dongyi",str); //存入商品数据,供页面载入和购物车页面提取数据；
var shuliang = document.querySelectorAll(".shuliang")[0];
var shuju = localStorage.getItem("dongyi")
var sj = JSON.parse(shuju);
var stm = "";
let sss = JSON.parse(localStorage.getItem("car"));
//页面载入数据；
for(i = 0;i<sj.length;i++){
stm += `
${
sj[i].url} ">
冬季衣服${
sj[i].id}
价格：${
sj[i].jiage}rmb
${
sj[i].id} />
`
}
var oUl = document.querySelectorAll(".ul")[0];
oUl.innerHTML=stm;
//给加入购物车按钮添加点击事件
var inp = document.querySelectorAll("input");
for(let i = 0;i<inp.length;i++){
inp[i].onclick=()=>{
let carshuju = JSON.parse(localStorage.getItem("car"));
if(carshuju){
var pan = carshuju.find(function(v,c){
return v.id === i;
})
var biao = carshuju.findIndex(function(v,j){
return v.id === i;
})
}else{
let cart1 =[{
"id":i,"shuliang":1}];
localStorage.setItem("car",JSON.stringify(cart1));
}
if(biao != -1){
let cart2 = JSON.parse(localStorage.getItem("car"));
let shu = carshuju[biao].shuliang+1;
let cart ={
"id":i,
"shuliang":shu};
cart2.splice(biao,1,cart);
cart2 = JSON.stringify(cart2);
localStorage.setItem("car",cart2);
}else{
let cart1 =
{
"id":i,
"shuliang":1}
carshuju.push(cart1);
cart2 = JSON.stringify(carshuju)
localStorage.setItem("car",cart2)
}
let sss = carshuju;
shuliang.innerHTML = sss.length;
}
}
script>
html>
购物车页功能实现
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style type="text/css">
.car{
width: 505px;
margin: 0 auto;
padding: 0px;
}
li{
list-style: none;
width: 500px;
height: 50px;
display: flex;
justify-content: space-between;
background: #cecece;
border: blueviolet 2px solid;
margin: 10px 0px;
border-radius: 15px;
padding: 10px;
}
img{
width: 50px;
}
img,div{
float: left;
}
div p{
margin: 0;
line-height: 25px;
height: 25px;
width: 240px;
}
li div .jia{
float: right;
color: red;
}
.biao{
display: flex;
justify-content: space-between;
}
.shu{
width: 40px;
height: 16px;
}
.input{
line-height: 50px;
}
style>
<body>
<ul class="car">
ul>
body>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
var car = document.querySelectorAll(".car")[0]; //获取购物车ul;
var shuju = JSON.parse(localStorage.getItem("car"));//获取localstorage里的"car"数据;
var liebiao = JSON.parse(localStorage.getItem("dongyi"));
var st = "";
//遍历数据载入页面
for(i=0;i<shuju.length;i++){
st += `
${
liebiao[shuju[i].id].url} " >
棉衣${
liebiao[shuju[i].id].id}
${
liebiao[shuju[i].id].jiage}rmb
${
shuju[i].shuliang}" class = "shu">
`
}
car.innerHTML = st;
function bian(can,id){
let carshuju = JSON.parse(localStorage.getItem("car"));
var biao = carshuju.findIndex(function(v,j){
return v.id === id;
})
let cart2 = JSON.parse(localStorage.getItem("car"));
let shu1 = carshuju[biao].shuliang+can;
let cart ={
"id":carshuju[biao].id,
"shuliang":shu1};
cart2.splice(biao,1,cart);
cart2 = JSON.stringify(cart2);
localStorage.setItem("car",cart2);
}
var shan = document.querySelectorAll(".shan");
var jiaan = document.querySelectorAll(".jiashang");
var jian = document.querySelectorAll(".jian");
var shu = document.querySelectorAll(".shu");
for(let i=0;i<jiaan.length;i++){
jiaan[i].onclick =function(){
shu[i].value = Number(shu[i].value)+1;
bian(1,i);
}
}
for(let i=0;i<jian.length;i++){
jian[i].onclick =function(){
if(shu[i].value>1){
shu[i].value = Number(shu[i].value)-1;
bian(-1,i);
}
}
}
//遍历所有点击按钮
for(let i = 0;i<shan.length;i++){
//给每个删除删除按钮添加点击事件
shan[i].onclick = function(){
let ul = document.querySelectorAll(".car")[0];
let danpin = document.querySelectorAll(".danpin");
ul.removeChild(danpin[i]); //删除对应的商品项
// let carshuju = JSON.parse(localStorage.getItem("car"));
let cart2 = JSON.parse(localStorage.getItem("car")); //获取localstorage里的商品数据;
cart2.splice(i,1); //删除对应项的商品数据;
// cart2 = JSON.stringify(cart2);
localStorage.setItem("car",JSON.stringify(cart2)); //新数据存入顶替旧数据;
location.reload();//刷新页面载入新数据;
}
}
script>
html>
cookie购物车待续谢谢大家；