JS有哪幾種傳參方式

2021-09-28 23:46:55 字數 2712 閱讀 8608

所有函式的引數都是按值傳遞的,也就是說把函式外部的值賦值給函式內部的引數,就和把值從乙個變數賦值到另乙個變數一樣。

————《js高階程式設計》

有的人可能會把這裡的js傳參方式,理解成js函式中的引數傳遞,但是呢,我們所要講的是頁面之間的資料傳遞。

傳統的前端開發中,頁面之間是少有引數互動的,甚至沒有,而在如今的前端環境下, 乙個稍微正式點的專案都不可能少了頁面間傳參,頁面的跨越、伺服器後台進行資料請求等,都需要乙個或多個傳參的方法。 那麼引數在不同的頁面間進行傳遞,乙個頁面的引數被另一頁面使用,如何才能做到不同頁面間進行引數傳遞?

在js中有多種頁面傳遞引數的方法:

一、url l傳參

把引數值附在url後面傳遞到其他頁面

二、h5 web storage

localstroage 和 sessionstorage

三、cookie

使用瀏覽器cookie傳遞引數

四、form 表單

form表單通過url傳遞引數

把引數值附在url後面傳遞到其他頁面

如:

sessionstorage用於本地儲存乙個會話(session)中的資料,這些資料只有在同乙個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionstorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。

localstorage html5本地儲存web storage特性的api之一,用於將大量資料(最大5m)儲存在瀏覽器中

不管是 localstorage,還是 sessionstorage,可使用的api都相同,常用的有如下幾個(以localstorage為例):

儲存資料:localstorage.setitem(key,value); 

讀取資料:localstorage.getitem(key);

刪除單個資料:localstorage.removeitem(key);

刪除所有資料:localstorage.clear();

得到某個索引的key:localstorage.key(index);

在有多組資料需要儲存時,一般:

cookie是當你瀏覽某**時,**儲存在你機器上的乙個小文字檔案,

它記錄了你的使用者id,密碼、瀏覽過的網頁、停留的時間等資訊,當你再次來到該**時,

**通過讀取cookie,得知你的相關資訊,就可以做出相應的動作,如在頁面顯示歡迎你的標語,

或者讓你不用輸入id、密碼就直接登入等等

cookie一般有兩個作用。

第乙個作用是識別使用者身份。

比如使用者 a 用瀏覽器訪問了 那麼 的伺服器就會立刻給 a 返回一段資料「uid=1」(這就是 cookie)。當 a 再次訪問 的其他頁面時,就會附帶上「uid=1」這段資料。

同理,使用者 b 用瀏覽器訪問 時, 發現 b 沒有附帶 uid 資料,就給 b 分配了乙個新的 uid,為2,然後返回給 b 一段資料「uid=2」。b 之後訪問 的時候,就會一直帶上「uid=2」這段資料。 藉此, 的伺服器就能區分 a 和 b 兩個使用者了。

第二個作用是記錄歷史。

假設 是乙個購物**,當 a 在上面將商品 a1 、a2 加入購物車時,js 可以改寫 cookie,改為「uid=1; cart=a1,a2」,表示購物車裡有 a1 和 a2 兩樣商品了。 這樣一來,當使用者關閉網頁,過三天再開啟網頁的時候,依然可以看到 a1、a2 躺在購物車裡,因為瀏覽器並不會無緣無故地刪除這個 cookie。 藉此,就達到裡記錄使用者操作歷史的目的了。

form表單傳值也是通過url傳遞引數

跳轉至demo2.com時,

url為: demo2.com?id=laowang&name=666666

通常使用的表單的提交方式主要是: post和get兩種。

兩者的區別在於:

post方式是把資料內容放在請求的資料正文部分,沒有長度的限制;

get方式則是把資料內容直接跟在請求的頭部的url後面,有長度的限制。

而一般在表單的資料提交中,都會選擇post方式,

因為使用get方法資料是通過url傳遞的,在位址列中會直接看到傳遞的資料,這樣就缺少安全性。

而使用post傳遞時,是把提交的資料放置在http包的包體中,位址列不會看到資料。

既然有如此多種頁面傳參的方式。那麼問題來就來了,在什麼情況下,適合使用以上介紹的傳遞方式呢?

傳遞少量不涉及隱私的引數時可以使用直接url或者form的get方式傳遞;

大量資料可以用post傳遞會話資訊等可以用cookie和localstorage;

臨時資料可用sessionstorage

url傳參:

優點:取值方便,可以跨域。

缺點:值長度有限制。

h5 web storage:

優點:使用起來非常簡單、方便。

缺點:相容性有點小問題。相容性: 現代瀏覽器(firefox safari chrome opera)都支援,ie8以下(不包括ie8)不支援。

cookie傳參:

優點:相容性最好,可以在同源內的任意網頁內訪問,生命期可以設定。

缺點:值長度有限制(儲存的容量小),還得注意請求介面時別帶到http head。

JS有哪幾種傳參方式?

我們今天講的傳參是指頁面之間的資料傳遞。傳統的前端開發中,頁面之間是少有引數互動的,甚至沒有,而在如今的前端環境下,乙個稍微正式點的專案都不可能少了頁面間傳參,頁面的跨越 伺服器後台進行資料請求等,都需要乙個或多個傳參的方法。那麼引數在不同的頁面間進行傳遞,乙個頁面的引數被另一頁面使用,如何才能做到...

css定位有哪幾種方式?

相信很多的初學者和我一樣在剛接觸有關浮動和定位都有些搞不清楚,在這裡我將介紹一下我所理解的有關 css的定位方式。在css中浮動主要是解決一些有關布局的左右排列問題,其實定位的作用和浮動的作用差不多,不過區 別是定位用來解決疊加排列的問題。在用定位時,你需要寫position屬性,position ...

vi有哪幾種模式

vi有三種工作模式,分別是 1 命令模式,是啟動vi後進入的工作模式,並可轉換為文字編輯模式和最後行模式 2 文字編輯模式,用於字元編輯 3 最後行模式。vi有三種工作模式 命令模式 文字編輯模式和最後行模式。不同工作模式下的操作方法有所不同。1 命令模式 命令模式是啟動vi後進入的工作模式,並可轉...