JS有哪幾種傳參方式?

2021-08-21 06:31:23 字數 4057 閱讀 1667

我們今天講的傳參是指頁面之間的資料傳遞。

傳統的前端開發中,頁面之間是少有引數互動的,甚至沒有,而在如今的前端環境下,

乙個稍微正式點的專案都不可能少了頁面間傳參,頁面的跨越、伺服器後台進行資料請求等,都需要乙個或多個傳參的方法。

那麼引數在不同的頁面間進行傳遞,乙個頁面的引數被另一頁面使用,如何才能做到不同頁面間進行引數傳遞?

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

一、url

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

二、h5 web storage

localstroage 和 sessionstorage

三、cookie

使用瀏覽器cookie傳遞引數

四、form 表單

form表單通過url傳遞引數

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

如:             

其中 「user=laozhang」和 「pwd=66666」就是我們傳遞的引數名稱和值。

url和引數之間用 "?"隔開

多個引數之間用 "&"符號連線。

優點:1、 url位址法簡潔易用,可同時傳遞多個字元型引數;

2、 url位址法可以很方便的在頁面之間切換並傳遞引數,無需額外的處理,基於正常情況比較不會效能損失;

不足:3、 url傳遞引數長度受限,最大為2k;

4、 url只能傳遞字元型引數,傳遞中文時,由於傳送頁面和接收頁面的字元編碼方式不一樣而導致引數解析處理錯誤,引數包含中文時可能出現亂碼或者引數接收錯誤;

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

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

. 儲存後資料永遠存在不會失效過期,除非手動清除。

. 不參與網路傳輸。

. 一般用於效能優化,可以儲存、js、css、html 模板、大量資料。

3、資料以 鍵/值 (key/value)對存在, web網頁的資料只允許該域訪問使用

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

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

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

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

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

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

5、資料儲存:

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

.建立乙個新的物件,然後將多組資料儲存在物件中,

.使用 json.stringify() 來將物件轉換為字串,

.使用localstorage.setitem(key,value);儲存資料。

6、資料提取:

.使用localstorage.getitem(key)讀取資料

. 使用 json.parse 方法將字串轉換為 json 物件。

. 直接引用物件的各個值。

cookie是什麼

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

或者讓你不用輸入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。

藉此,就達到裡記錄使用者操作歷史的目的了。

cookie的一些特點。

1.cookie可以使用 js 在瀏覽器直接設定(用於記錄不敏感資訊,如使用者名稱), 也可以在服務端通使用 http 協議規定的 set-cookie

來讓瀏覽器種下cookie,這是最常見的做法。

2.每次網路請求 request headers 中都會帶上cookie。所以如果 cookie太多太大對傳輸效率會有影響。

3.一般瀏覽器儲存cookie最大容量為4k,所以大量資料不要存到cookie。

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

跳轉至page2.com時,

url為: page2.com?id=laozhang&name=666666

通常使用的表單的提交方式主要是:

post和get兩種。

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

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

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

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

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

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

在傳遞少量不涉及隱私的引數時可以使用直接url或者form的get方式傳遞,大量資料可以用post傳遞

會話資訊等可以用cookie和localstorage,臨時資料可用sessionstorage

6.1、url傳參:

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

缺點:值長度有限制。

6.2、h5 web storage:

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

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

6.3、cookie傳參:

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

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

參考一:js傳參方式

參考二:理解cookie及其用法

參考二:web storage

1、按值傳參的值是什麼值?

(形式引數型別是基本資料型別):

方法呼叫時,實際引數把它的值傳遞給對應的形式引數,

形式引數只是用實際引數的值初始化自己的儲存單元內容,

是兩個不同的儲存單元,所以方法執行中形式引數值的改變不影響實際引數的值。

2、引用傳遞是什麼意思?

(形式引數型別是引用資料型別引數):也稱為傳位址。

方法呼叫時,實際引數是物件(或陣列),

這時實際引數與形式引數指向同乙個位址,

在方法執行中,對形式引數的操作實際上就是對實際引數的操作,

這個結果在方法結束後被保留了下來,所以方法執行中形式引數的改變將會影響實際引數。

3、哪種情況下適合用sessionstorage傳參?

會話資訊等可以用cookie和localstorage,可以永久儲存(不過只有5m)。臨時資料可用sessionstorage,不過

當會話結束後資料也隨之銷毀。

JS有哪幾種傳參方式

所有函式的引數都是按值傳遞的,也就是說把函式外部的值賦值給函式內部的引數,就和把值從乙個變數賦值到另乙個變數一樣。js高階程式設計 有的人可能會把這裡的js傳參方式,理解成js函式中的引數傳遞,但是呢,我們所要講的是頁面之間的資料傳遞。傳統的前端開發中,頁面之間是少有引數互動的,甚至沒有,而在如今的...

css定位有哪幾種方式?

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

vi有哪幾種模式

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