js array 保存数据

最新推荐文章于 2022-12-10 00:46:34 发布

iteye_10211

最新推荐文章于 2022-12-10 00:46:34 发布

阅读量591

点赞数 1

分类专栏：技术学习文章标签： Ajax QQ JSP

技术学习专栏收录该内容

46 篇文章 0 订阅

订阅专栏

昨天做一个这样的功能，比如QQ红钻如通知消息这样的。需要通知用户到期的一些信息。我们的需求一开始是只实现读取下一条信息，让他一条一条读取就可以了。可是现在需求又添加了可以查看上一条消息和最后一条的要求。这里面有一个难点，就是每当发出的消息用户读取一条时它的状态将改变就相当与少了一条消息。所以要这样的实现现在是找不回上条记录的。后来考虑，觉得自己只能用两种方式来保存读取过的消息。并且保证他下次刷新读取时总是最新的纪律。但是本次是可以查看这次读取过的消息。
觉得可用的方法一、就是把数据读取出来保存在一个Cookie里。这样保证读取过的数据还是存在的。
方法二、就是利用js来实现这个功能。把读取出来的数据放在一个js的array里保存。这样也确保把数据先读取出来就不会丢失改变状态的数据。读取的只是js的array就可以了。
cookie 没怎么用过，最后决定用js来实现。
还是把代码发给大家一起探讨吧，希望对也需要做这样功能的朋友有所帮助。更希望大家有更好的方法，能不吝赐教。
代码如下：

[color=blue] // java 代码一个保存信息的java集合方法[/color]<%
List listInfo = new ArrayList();
listInfo = Informations.getInformations(userId,100,0);
int listCount = listInfo.size();
%>
[color=blue] //一些重要的js代码[/color]
<script language="javascript">
//定义array全局变量
var array = new Array();
var arrayId = new Array();
var count=0;
<% // js 里嵌套java代码，把取出的数据赋值给js全局变量array来保存
List arrlist = listInfo;
Iterator iter = arrlist.iterator();
int s = 0;
while(iter.hasNext()){
Information strcolor = (Information)iter.next();
int execID = strcolor.getInfo_ID();
String exec= strcolor.getInfo_context();
%>
arrayId[<%=s%>]="<%=execID%>"; // 消息的ID
array[<%=s%>]="<%=exec%>"; // 消息的内容
<%s++;
}
%>

// 页面加载时调用的一个方法。这个方法是控制消息在显示第一条时为不可点击
function onLoadOpen(){
if(<%=listCount%> > 0){
Open(); // 是为了打开页面遮罩
document.getElementById("btn1").disabled= true;
}
}
// 这个方法只是对一个消息的状态更新操作的。用了ajax
function infoNext(perInfoID)
{
var ajax = getXMLHttpRequest();
var url="${pageContext.request.contextPath}/pub/renew_getInformation.jsp?perInfoID="+perInfoID+"&ran="+Math.random();
ajax.open("get", url, true);
ajax.send(null);
}
</script>

[color=blue]// 页面调用[/color]

<body οnlοad="infoNext('0');onLoadOpen();">
<div id="divOpenWin">
<img height="5" src="${pageContext.request.contextPath}/images/blank.gif" /><br />
<TABLE cellSpacing="0" cellPadding="0" width="98%" border="0">
<TR>
<TD bgColor="#325380" height="7"><IMG
src="${pageContext.request.contextPath}/skin/content-top-left_delt.gif"></TD>
<TD width="7" bgColor="#325380" height="7"><IMG
src="${pageContext.request.contextPath}/skin/blank.gif"></TD>
</TR>
<TR>
<TD
style="BORDER-LEFT: #325380 1px solid; BORDER-BOTTOM: #325380 1px solid;">
<table width="100%" class="clsDataList" height="180">
<tr>
<th align="left" height="22">消息通知</th>
</tr>
<tr>
<td>
<input type="hidden" id="tmpID" name="tmpID" value=""/>
<div id="contextID">
</div>
<script language="javascript">
var contextID = document.getElementById("contextID");
var count=0;
contextID.innerHTML=array[count];
function onInfoNext(){
var infoNext2 = document.getElementById("btn2");
var infoBack1 = document.getElementById("btn1");
var infoEnd3 = document.getElementById("btn3");
if(infoNext2.value == "下一条"){
infoBack1.disabled = false;
infoNext(arrayId[count]);// 调用一下更新消息状态的方法
count++;
contextID.innerHTML=array[count];
if(count == (<%=listCount%>-1)){
infoNext2.disabled = true;
infoEnd3.disabled = true;
}
}
}
function onInfoBack(){
var infoNext2 = document.getElementById("btn2");
var infoBack1 = document.getElementById("btn1");
var infoEnd3 = document.getElementById("btn3");
if(infoBack1.value == "上一条"){
count--;
contextID.innerHTML=array[count];
if(count == 0){
infoBack1.disabled = true;
}else{
infoNext2.disabled = false;
infoEnd3.disabled = false;
}
}
}

function onInfoEnd(){
var infoEnd3 = document.getElementById("btn3");
var infoNext2 = document.getElementById("btn2");
var infoBack1 = document.getElementById("btn1");
if(infoEnd3.value="最后一条"){
count = <%=listCount%>-1;
infoNext(arrayId[count]);// 调用一下更新消息状态的方法
contextID.innerHTML=array[count];
infoBack1.disabled = false;
infoEnd3.disabled = true;
infoNext2.disabled = true;

}
}

</script>
</td>
</tr>
<tr>
<td align="center"><font color="blue">一共有 <%=listCount%> 条信息</font></td>
</tr>
<tr>
<td align="center">
<button id="btn1" class="clsBtn4w" name="btn1" οnclick="onInfoBack();">上一条</button>
<button id="btn2" class="clsBtn4w" name="btn2" οnclick="onInfoNext();">下一条</button>
<button id="btn3" class="clsBtn4w" name="btn3" οnclick="onInfoEnd();">最后一条</button>
<button id="btn3" class="clsBtn2w" name="btn3" οnclick="Close();">关闭</button>
</td>
</tr>
</table>
</TD>
<TD vAlign="bottom" width="7" bgColor="#325380"><IMG
src="${pageContext.request.contextPath}/skin/content-right-bottom_delt.gif"></TD>
</TR>
</TABLE>
</div>
</body>

// 重要的代码就是以上代码，这个消息是在一个遮罩层上显示的。只有消息是可点击的，其它地方是不可点击的。除非关闭消息框才可查看。
截图效果如下：

解释一下就是一个模糊的遮罩层这个层是不可点击的。在层上面显示我的提示消息内容供用户读取，也就是说消息是强制让他查看的，如果他不愿意查看除非关闭当前消息窗口。否则是无法进行其它操作。

iteye_10211

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js array 保存数据

昨天做一个这样的功能，比如QQ红钻如通知消息这样的。需要通知用户到期的一些信息。我们的需求一开始是只实现读取下一条信息，让他一条一条读取就可以了。可是现在需求又添加了可以查看上一条消息和最后一条的要求。这里面有一个难点，就是每当发出的消息用户读取一条时它的状态将改变就相当与少了一条消息。所以要这样的实现现在是找不回上条记录的。后来考虑，觉得自己只能用两种方式来保存读取过的消息。并且保证他下次刷...
复制链接

扫一扫

专栏目录