`
Angelialily
  • 浏览: 241681 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js array 保存数据

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

// java 代码 一个保存信息的java集合方法<%
List listInfo = new ArrayList();
listInfo = Informations.getInformations(userId,100,0);
int listCount = listInfo.size();
%>
//一些重要的js代码
<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>

// 页面调用

<body onload="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">一共有&nbsp;<%=listCount%>&nbsp;条信息</font></td>
</tr>
<tr>
<td align="center">
&nbsp;<button id="btn1" class="clsBtn4w" name="btn1" onclick="onInfoBack();">上一条</button>
&nbsp;<button id="btn2" class="clsBtn4w" name="btn2" onclick="onInfoNext();">下一条</button>
&nbsp;<button id="btn3" class="clsBtn4w" name="btn3" onclick="onInfoEnd();">最后一条</button>
    &nbsp;<button id="btn3" class="clsBtn2w" name="btn3" onclick="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>

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

    解释一下就是一个模糊的遮罩层 这个层是不可点击的。在层上面显示我的提示消息内容供用户读取,也就是说消息是强制让他查看的,如果他不愿意查看除非关闭当前消息窗口。否则是无法进行其它操作。
  • 描述: 实现效果
  • 大小: 41 KB
2
2
分享到:
评论
1 楼 少女杀手 2009-07-17  
你的这篇文章,我复制下来了,周末我好好研究一下,如果我有不懂的地方,就找你了啊!

相关推荐

    使用JS保存数据

    在JavaScript(JS)中保存数据是一项常见的需求,特别是在Web应用中。通过JavaScript,开发者可以直接在客户端处理数据,而无需服务器的交互,这提高了应用程序的效率和用户体验。本篇将深入探讨如何在IE浏览器中...

    Javascript中关于Cookie存储Array集合

    在JavaScript中,Cookie是用于在用户浏览器中存储小量数据的一种机制。它们是HTTP协议的一部分,主要用于跟踪用户会话、存储用户首选项或保存登录状态。Cookie由服务器生成,并通过HTTP响应头发送到浏览器,浏览器在...

    基于Vue与JavaScript的数据大屏可视化编辑器设计与实现

    例如,使用JavaScript的Array和Object方法处理数据结构,或者使用lodash等工具库来简化数据操作。 此外,ECMAScript(ES)的新特性,如ES6的箭头函数、类和模块语法,提供了更简洁、高效的编码风格。在Vue.js项目中...

    javascript Array.remove() 数组删除

    在JavaScript中,数组是一种常用的数据结构,用于存储一系列的元素。然而,JavaScript的原生数组对象并没有提供直接删除特定值的方法,例如`remove()`。在标题和描述中提到的`Array.remove()`方法实际上是一个自定义...

    js 保存图片

    在JavaScript(JS)环境中,有时候我们需要在用户浏览器端实现图片的保存功能,特别是在没有后端支持的情况下。这个任务可以通过HTML5的一些新特性来完成,尤其是File API和Blob对象的使用。"js 保存图片"这一主题...

    [removed]Array类型全面解析

    JavaScript中的每一项可以保存任何类型的数据。而且,JavaScript数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新增数据。 创建数组的基本形式有两种。 1.Array构造函数 var cities = new Array();...

    表格信息的删\改\翻页【利用js进行数据渲染的方式】.zip

    此外,为了保存用户修改的数据,可能还需要与服务器进行通信,如使用AJAX异步请求更新数据库。 至于翻页功能,通常我们会创建一个分页导航条,包括“上一页”、“下一页”和数字页码按钮。当用户点击这些按钮时,JS...

    原生JS上传文件,获取文件二进制数据及文件大小和文件名称

    本知识点将深入探讨如何使用原生JavaScript实现文件上传,获取文件的二进制数据、大小以及文件名称。 首先,我们需要一个HTML元素,通常是`&lt;input type="file"&gt;`,用于让用户选择要上传的文件。例如: ```html ``...

    js数组说明大全

    JavaScript 中的数组是一种基本数据类型,用于存储一组相关的数据。数组可以存储各种类型的数据,包括数字、字符串、对象等。数组的使用非常广泛,以下是对 JavaScript 数组的详细说明。 一、创建数组 JavaScript ...

    JS算法 数据结构 精华集.zip

    《JS算法 数据结构 精华集.zip》这个压缩包文件是针对JavaScript编程语言中算法与数据结构的学习资源集合。数据结构是计算机科学的基础,它关乎如何有效地存储和组织数据,以便于高效地访问和操作。JavaScript,作为...

    JS中Array数组学习总结

    在我看来,它是用来保存数据的。 一、声明一个数组: 1、构造函数 var colors=new Array();简写的话可以省略new,即var colors=Array(); 2、数组字面量 var colors=[“black”,”green”,”pink”]; 二、读取和设置...

    用js保存页面指定内容、指定文件类型

    标题 "用js保存页面指定内容、指定文件类型" 涉及的是JavaScript(js)在Web开发中的一个常见应用场景,即动态地从网页中提取特定内容,并将其保存为用户指定的文件格式。在这个例子中,重点是将HTML表格(Table)的...

    浅谈ECMAScript 中的Array类型

    在JavaScript中,Array类型是不同于其他编程语言中数组的,其特性包括可以保存任意类型的数据以及动态调整长度。 首先,JavaScript中的数组可以存储任何类型的数据项,如数字、字符串、对象等,这与C语言等静态类型...

    JavaScript之数据类型

    与基本数据类型不同,对象是存储在堆内存中的,而变量仅保存对这些对象的引用。 3. **动态数据类型** JavaScript是动态类型语言,这意味着变量的类型不是固定的。你可以随时改变变量的类型,如: ```javascript ...

    js拖拽排序并保存到数据库

    在JavaScript(JS)中实现拖拽排序功能,可以极大地提升用户交互体验,尤其是在管理列表、项或元素时。拖拽排序允许用户通过直观地拖动元素来改变它们的顺序,这种功能在各种Web应用中非常常见,比如任务管理器、...

    【JavaScript源代码】elementui导出数据为xlsx、excel表格.docx

    在JavaScript开发中,ElementUI是一个基于Vue.js的组件库,提供了丰富的UI组件,用于构建用户界面。在某些场景下,我们需要将数据导出为Excel或xlsx格式,方便用户进行数据分析和存储。这篇文档主要介绍了如何在使用...

    JavaScript数据结构案例.pdf

    变量是存储数据的容器,可以用来保存各种类型的数据,如字符串、数字、布尔值等。在上面的案例中,`var carname="Volvo"`是一个局部变量,它在函数`myFunction()`内部声明,只在这个函数的作用域内有效。当用户点击...

    MySQL数据生成JSON数据

    MySQL是一种广泛使用的开源关系型数据库管理系统,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,常用于Web服务和前后端数据传输。在MySQL中,将数据转换为JSON格式是常见的需求,尤其在处理...

    js实现canvas保存图片为png格式并下载到本地的方法

    这个函数首先将base64编码的字符串按照分号和逗号分割开,取得数据类型和编码后的字符串,然后使用`atob`函数将编码后的字符串转换为原始的字符数组,再将这个数组转换为一个`Uint8Array`对象。最后,使用`new Blob`...

Global site tag (gtag.js) - Google Analytics