localstorage实现两个页面通信,购物车原理。
如:A,B页面,A为商品页,B为购物车页,两个页面同时打开,在A页面点击商品添加至购物车,切换到B页面购物车怎么显示该商品信息
- 利用localStroage,A页面将数据存入localStroage,B页面读取localStorage中的数据
- 关键点: B页面如何知道A页面什么时候存数据到localStorage
- localStorage中有个‘storage’事件
- window.addEventListener(‘storage’, callback),A页面存数据,B页面监听事
A页面
<button id="add">添加一件商品到购物车</button>
<button id="del">删除一件商品从购物车</button>
<script type="text/javascript">
window.onload = function () {
document.getElementById('add').onclick = function () {
count(true)
} document.getElementById('del').onclick = function () {
count(false)
} function count(flag) {
let count = localStorage.getItem('count')?JSON.parse(localStorage.getItem('count')).count:0;
if(flag){
count += 1;
}else {
if(!count) return;
count -= 1;
}
let countObj = {
count
}
localStorage.setItem('count', JSON.stringify(countObj))
}
} B页面
<div class="cart">
购物车产品数量:
<span class="count">0</span>
</div>
<script type="text/javascript">
document.querySelector('.count').textContent = localStorage.getItem('count')?JSON.parse(localStorage.getItem('count')).count:0;
window.addEventListener('storage', function (event) {
console.log(JSON.parse(event.newValue).count);
document.querySelector('.count').textContent = JSON.parse(event.newValue).count
})
</script>
localstorage实现两个页面通信,购物车原理。的更多相关文章
- SSE两个页面的相互通信
两个页面之间互相通信 首先搭建express框架,然后通过two页面发送数据给服务器,服务器把数据传送给one页面 在two 中发送数据,在one中显示 router/index.js var axi ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- js之iframe父、子页面通信
注意事项 一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断ifra ...
- sharedWorker 实现多页面通信
是这样的,今天玩github,先是在没有登录浏览了一些页面,然后在某一页面进行了登录.这时再切换的其他页面时就看到了下面的提示: 那么这是怎么做到的呢?我们可以想到,一种办法是 localStorag ...
- php购物车原理
<?php/*购物车原理在产品展示页面时(如 shop.php?id=888),点击购买或添加到购物车时,根据相应的产品标识符(如 id),查询相应的数据库,如果查询表示有此产品,用 $_SES ...
- 学习安卓开发[1] - 程序结构、Activity生命周期及页面通信
一.程序结构 Android原生应用采用了MVC的架构设计模式,因此可以将一个Android APP中的对象归为Model.View或Controller中的一种. 具体到某个实际的APP结构中,它一 ...
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
- iframe之父子页面通信
iframe之父子页面通信 1.获取 子页面 的 window 对象 在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...
- 图文详解 Android Binder跨进程通信机制 原理
图文详解 Android Binder跨进程通信机制 原理 目录 目录 1. Binder到底是什么? 中文即 粘合剂,意思为粘合了两个不同的进程 网上有很多对Binder的定义,但都说不清楚:Bin ...
随机推荐
- AI: Web: 2 Vulnhub Walkthrough
靶机下载链接: https://www.vulnhub.com/entry/ai-web-2,357 主机端口扫描: 尝试SQL注入,未发现有注入漏洞,就注册创建于一账户 http://10.10.2 ...
- iOS开发-APP图标、启动页、名字的设置
APP图标.启动页.名字的设置:(较全面,但是APP启动页讲述的有漏洞) 参考链接:https://www.jianshu.com/p/2c7e181276ff APP启动页:(弥补上一文的漏洞) 参 ...
- 62-Weave 网络结构分析
上一节我们安装并创建了 Weave 网络,本节将部署容器并分析网络结构. 在 host1 中运行容器 bbox1: eval $(weave env) docker run --name bbox1 ...
- VNC连接CentOS7远程桌面
1.在centos7安装图形化 先安装图形用户接口X Window System,再安装GNOME桌面. [root@centos7 ~]# yum groupinstall -y "X W ...
- weed3-2.2.细讲插入和更新
Weed3 一个微型ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 这篇重点讲讲插 ...
- 【每天一题】LeetCode 0028. 字符串匹配
开源地址:https://github.com/jiauzhang/algorithms 题目描述 * https://leetcode-cn.com/problems/implement-strst ...
- 一起学Spring之三种注入方式及集合类型注入
本文主要讲解Spring开发中三种不同的注入方式,以及集合数据类型的注入,仅供学习分享使用,如有不足之处,还请指正. 概述 Spring的注入方式一共有三种,如下所示: 通过set属性进行注入,即通过 ...
- 初识NLP 自然语言处理
接下来的一段时间,要深入研究下自然语言处理这一个学科,以期能够带来工作上的提升. 学习如何实用python实现各种有关自然语言处理有关的事物,并了解一些有关自然语言处理的当下和新进的研究主题. NLP ...
- python3 tornado api + angular8 + nginx 跨域问题
问题: 上一个博客部署好了api之后,前端开始吊发现了跨域的问题. 接口地址: http://111.231.201.164/api/houses 服务器上使用的是nginx转发 数据: 前端ang ...
- 通过程序调用微信公众号发消息api返回48001
自己的订阅号,尝试通过写程序来给用户发消息.结果呢,接口返回报错:errcode=48001,errmsg = api unauthorized hint: [ZlPULa02942276!] 去微信 ...