JavaScript跨頁面?zhèn)髦?/h1>

面之間互相傳值通常有以下幾種方法：

1、URL （如：index.html?id=123）

2、cookie

3、本地存儲 （localStorage、sessionStorage）

sessionStorage與 localStorage很相似，不同之處在于 localStorage 里面存儲的數(shù)據(jù)沒有過期時間設(shè)置，而存儲在 sessionStorage 里面的數(shù)據(jù)在頁面會話結(jié)束時會被清除。（也就是localStorage長期保存，sessionStorage 關(guān)閉頁面后清除）

今天主要給大家介紹一下使用sessionStorage進行頁面之間互相傳值（通信）

思路：從A頁面跳轉(zhuǎn)到B頁面，然后B頁面獲取數(shù)據(jù)再傳到A頁面

A頁面

B頁面

點擊B頁面按鈕返回A頁面，A頁面加載傳回來的數(shù)據(jù)“我是b頁面，張三豐”

A頁面（a.html）

B頁面（b.html）

語：在我們使用Axure進行原型設(shè)計的時候，在同一個頁面實現(xiàn)點擊不同的按鈕切換顯示不同的內(nèi)容，可以通過動態(tài)面板來實現(xiàn)；如果要實現(xiàn)在a頁面點擊不同的按鈕，在B頁面中顯示不同的內(nèi)容應(yīng)該如何實現(xiàn)呢？本文將介紹如何通過全局變量保存值并進行跨頁面?zhèn)髦祦韺崿F(xiàn)這個效果。

一、交互效果說明

點擊「首頁」金剛區(qū)的按鈕，跳轉(zhuǎn)至「分類」頁面，選中對應(yīng)的Tab選項，切換顯示對應(yīng)的內(nèi)容。

效果預(yù)覽：

原型預(yù)覽地址：https://h1efwr.axshare.com

二、交互效果制作

1. 創(chuàng)建兩個頁面，分別命名為「首頁」和「分類」。

2. 在「首頁」中拖入一個圓形和一個文本標簽，設(shè)置好顏色和文本，右鍵設(shè)置為組合，命名為【人文- Botton】，再復(fù)制出4個完全相同的組合，分別進行命名和設(shè)置，頁面其他內(nèi)容可自定義。

3. 在「分類」頁面中拖入一個矩形,設(shè)置文本內(nèi)容為“人文”，將其命名為「人文-Tab」；在右側(cè)【交互】面板中給其添加【元件選中的樣式】，效果如下圖所示，設(shè)置選項組名稱為「Tab組」。

4. 給文本標簽「人文-Tab」添加【鼠標單擊時】【選中當前元件】的交互。

5. 設(shè)置完成后，再復(fù)制出四個相同文本標簽分別命名和設(shè)置文本內(nèi)容，這樣Tab就制作完成了。

6. 制作出「分類」頁面的內(nèi)容部分，內(nèi)容可自定義，制作好后選中內(nèi)容右鍵轉(zhuǎn)化為動態(tài)面板，再復(fù)制出4個狀態(tài)，分別進行命名。

7. 給「Tab組」的5個文本標簽分別添加【選中】時的交互，切換到【內(nèi)容】面板的對應(yīng)狀態(tài)。

接下來我們需要通過設(shè)置全局變量來儲存我們的數(shù)據(jù)，在「首頁」中點擊按鈕給全局變量賦值，然后在「分類」頁面中載入時通過判斷全局變量的值，顯示不同的面板狀態(tài)。

8. 點擊頂部菜單【項目】-【全局變量設(shè)置】，添加一個全局變量，命名為「BottonVariable」，默認值為空。

9. 接下來分別給金剛區(qū)的5個按鈕組合添加【鼠標單擊時】的交互，分別【設(shè)置變量值】為「renwen」「lishi」「sheke」「yishu」「yinyue」；均設(shè)置【跳轉(zhuǎn)鏈接】至「分類」頁面。

這里需要保證在載入「分類」頁面前已經(jīng)賦值成功，所以設(shè)置變量值的交互要在跳轉(zhuǎn)鏈接之前。

10. 在「分類」中添加【頁面載入時】的交互，分別添加情形及對應(yīng)的選中效果，如下：

• 【變量值】「BottonVariable」為【renwen】時，設(shè)置動作為【選中】矩形元件「人文—Tab」；
• 【變量值】「BottonVariable」為【lishi】時，設(shè)置動作為【選中】矩形元件「人文—Tab」；
• 【變量值】「BottonVariable」為【sheke】時，設(shè)置動作為【選中】矩形元件「社科—Tab」；
• 【變量值】「BottonVariable」為【yishu】時，設(shè)置動作為【選中】矩形元件「藝術(shù)—Tab」；
• 【變量值】「BottonVariable」為【yinyue】時，設(shè)置動作為【選中】矩形元件「音樂—Tab」。

做完這一步，就完成整個效果了，通過這個案例也可舉一反三，用于登錄、搜索等其他需要頁面中傳值的交互中。

本文由 @Daisy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議

東優(yōu)就業(yè)

頁面?zhèn)髦敌〖记?/span>

平常我們在做的web項目，一般一個HTML頁面上會有好幾個步驟，step_num①，step_num②，step_num③，一般先顯示step_num①，根據(jù)跳轉(zhuǎn)條件顯示step_num②，step_num①隱藏，再跳轉(zhuǎn)step_num③，step_num①，step_num②隱藏，step_num③顯示。

思路： （js設(shè)置全局變量，哪里需要在哪里添加一個input標簽，把值賦給一個input，然后再讓input隱藏）。

廣東優(yōu)就業(yè)

先說下這個頁面的結(jié)構(gòu)，進入xxx.html頁面，通過js發(fā)送ajax.postForm請求，請求一個action，action調(diào)用handler，每一個功能都要請求一個action。

廣東優(yōu)就業(yè)

前兩天就是這樣的一個頁面，然后在傳值的時候就碰到了一個讓人腦仁疼的問題，需要在step_num①中顯示和未顯示的值，傳到step_num③對應(yīng)的后臺Java代碼，試了好幾種方法都不好用，最后，采用了一個小技巧

在js中先設(shè)一個全局變量，比如var groupID=" "; ，然后把從step_num①中從后臺action傳過來的GroupID賦給groupID，怎么傳給頁面三對應(yīng)的Java后臺呢？

現(xiàn)在step_num③對應(yīng)的HTML代碼中寫上這樣一條語句：<input id="chuanzhi" name="chuanzhi" type="hidden"/>然后在對應(yīng)的js代碼中把 $("#chuanzhi").val(groupID);

這樣你在step_num③對應(yīng)的Java后臺中就可以通過request.getParameter("chuanzhi")； 獲得你想要的groupID了

更多IT精彩內(nèi)容推薦：http://www.ujiuye.com/guangdong/?wt.mc_id=17009338

在線咨詢

上一篇：html實現(xiàn)雪花飄飄效果
下一篇：HTML URL編碼