html 頁面間傳參

1，簡短說明

網上搜了一下，關於頁面間（html）傳參，大部分都是在url上做文章，這樣很明顯存在安全問題
通過實踐，我使用了以下兩種方法來處理，具體如下

2，使用場景

列表中，點擊某行數據，彈出明細窗口

3，使用方法

@1：使用H5本地儲存Web Storage，包括：sessionStorage 和 localStorage

sessionStorage .setItem(“name”, “張三”);
sessionStorage .getItem(“name”);
localStorage 用法類似，作用域不同，鍵值對存儲，按需使用

@2：利用模板

進一步說明:
a：製作好彈窗內要展示的html，放入script標籤
b：彈出頁面時，ajax請求獲取數據並整理
c：使用layui模板引擎，將數據塞入模板中
d：樣例代碼，只提供思路

//第一步：編寫模版。你可以使用一個script標籤存放模板，如：
<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
  {{#  layui.each(d.list, function(index, item){ }}
    <li>
      <span>{{ item.modname }}</span>
      <span>{{ item.alias }}：</span>
      <span>{{ item.site || '' }}</span>
    </li>
  {{#  }); }}
  {{#  if(d.list.length === 0){ }}
    無數據
  {{#  } }} 
  </ul>
</script>
 
//第二步：建立視圖。用於呈現渲染結果。
<div id="view"></div>
 
//第三步：渲染模版
layui.use('laytpl', function(){
  var laytpl = layui.laytpl;
  var data = { //數據
 	 "title":"Layui常用模塊"
  	,"list":[{"modname":"彈層","alias":"layer","site":"layer.layui.com"},{"modname":"表單","alias":"form"}]
  }
  var getTpl = demo.innerHTML
  ,view = document.getElementById('view');
  laytpl(getTpl).render(data, function(html){
    view.innerHTML = html;
  });
});

4，參考鏈接

https://www.cnblogs.com/Xuedz/p/7105703.html
https://blog.csdn.net/ZD717822023/article/details/82115041
https://www.layui.com/doc/