≡ 外贸多产品报价与HTML5 LocalStorage 本地存储实际案例

多产品报价页面

引入多产品报价文件

<script type="text/javascript" src="includes/js/multiple_quoting.js"></script>

var MQlist=[];

if(typeof(Storage)==="undefined"){

alert('您的浏览器不支持localStorage特性，请更新您的浏览器!');

}

代码含义：打开多产品报价页面

function view_MQlist(){

var winMQ=window.open("multiple_quoting.php","winMQ");

}

代码含义：下面是载入本地数据

function clear_MQlist(){

MQlist=[];

localStorage["G_Multi_Quoting_List"]=JSON.stringify(MQlist);

}

function load_MQlist(){

  try{MQlist=JSON.parse(localStorage["G_Multi_Quoting_List"]);} 

  catch(e) {MQlist=[];}

}

function remove_MQlist(idx){

  MQlist.splice(idx,1);

  localStorage["G_Multi_Quoting_List"]=JSON.stringify(MQlist);

}

设置按钮-点击按钮运行2个程序

1add_to_MQlist（添加产品到本地）

2refresh_btnMQlist（隐藏显示点击按钮）

<div id="divMultiQuoting" style="display: block;">

<input type="button" value="Add to multi quote" onclick="this.style.display='none';add_to_MQlist(true);refresh_btnMQlist();" id="btnA2MQ" style="display: inline-block;">

<br><a id="aMQCount" target="winMQ" href="multiple_quoting.php">Multi Quote : 5</a></div>

add_to_MQlist

代码含义：添加一个当前页面的产品到多产品报价

function add_to_MQlist(bOpenWin){

var txt_project=document.getElementById('txt_project').value;

var txt_totqty=document.getElementById('txt_totqty').value;

var txt_exw_unit=document.getElementById('txt_exw_unit').value;

var txt_exw_total=document.getElementById('txt_exw_total').value;

var txt_tctn=document.getElementById('txt_tctn').value;

var txt_t_cbm=document.getElementById('txt_t_cbm').value;

var txt_ctn_Aweight=document.getElementById('txt_ctn_Aweight').value;

var txt_ctn_Mweight=document.getElementById('txt_ctn_Mweight').value;

var aTmp=[txt_project,txt_totqty,txt_exw_unit,txt_exw_total,

txt_tctn,txt_t_cbm,txt_ctn_Aweight,txt_ctn_Mweight];

MQlist.push(aTmp);

localStorage["G_Multi_Quoting_List"]=JSON.stringify(MQlist);

if (bOpenWin){view_MQlist();}

}

refresh_btnMQlist

假如本个产品被存了，则按钮被隐藏。

function refresh_btnMQlist(){

  document.getElementById('aMQCount').innerHTML='Multi Quote : '+MQlist.length;

  if (MQlist.length>0){

    document.getElementById('divMultiQuoting').style.display='block';

  } else {

    if (document.getElementById('btnA2MQ').style.display=='none'){

      document.getElementById('divMultiQuoting').style.display='none';

    }

  }

}  

refresh_btnMQlist();