项目需求

按照地区筛选时，大屏对应的项目进行精准匹配显示数据；点击对应图表的(N)按钮时，弹出图表也相应的显示对应的地区图表；

Echarts实战案例代码(13)：使用layui弹出模态框通过localStorage跨页面函数传递参数_模态框

Echarts实战案例代码(13)：使用layui弹出模态框通过localStorage跨页面函数传递参数_模态框_02

项目分析

源码分析

<div class="boxall" style="height:240px">
  <div class="alltitle">月收入分布<span class="laybg new6">N</span></div>
      <div class="navboxall" id="income"></div>
 </div>

1.在layui弹出模态框模态框，是没有url链接的，无法使用get形式，即index.php?m=Index&a=gender&township=XX镇的方式传递；

2.如果按照方式1解决，选择框状态改变时，如何同步在不刷新的情况将"XX镇"传给按钮，无解。

localStorage参数

在后端传递参数时，可以选择get、post、cookie和seesion等四种方式，layUI下，get和post方式被直接PASS。JavaScript有cookie和seesion的传递函数吗？


localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上。


1.参数存储；

localStorage.setItem("data", township);

2.参数获取；

localStorage.getItem("data");

解决方案

  • 主页面根据点击事件，储存数据：
//删除本地储存，防止缓存数据;
        localStorage.removeItem("data");

   //按照区域选择对应函数;
        $("#btn").click(function () {
            var township = $('.township').val();
            if (township == "陵城区") {
                window.location.reload();
            } else {
                localStorage.setItem("data", township);
                getAllData(township);
            }
        })
  • 子页面接受参数，并调用封装方法渲染图表：
//调用核心图表;
        $(function () {
            var township = localStorage.getItem("data");
            getGender(township);
        })

Done!