1. 利用localStroage,A页面将数据存入localStroage,B页面读取localStorage中的数据
2. 关键点: B页面如何知道A页面什么时候存数据到localStorage
3. localStorage中有个‘storage’事件
4. window.addEventListener(‘storage’, callback),A页面存数据,B页面监听事件
5. 代码示例
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)) } }
2. 关键点: B页面如何知道A页面什么时候存数据到localStorage
3. localStorage中有个‘storage’事件
4. window.addEventListener(‘storage’, callback),A页面存数据,B页面监听事件
5. 代码示例
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)) } }