在web項目開發過程中,會有頁面的跳轉,部分跳轉需要加載數據,這裏就存在不同的解決方案,其中之一就是cookie攜帶參數到跳轉的頁面。其他的解決方案只做思想的說明,不詳細說明,cookie方式實現將在本博客中具體說明。
方式一:通過將參數拼接在鏈接後,發送跳轉請求,在工程中將請求需要的參數放到request域中,然後跳轉到目標頁面,在目標頁面通過request域獲取參數數據,通過獲取的參數再向後臺發送請求,獲取需要加載的數據,將數據加載到頁面。這種方式需要在鏈接後面拼接參數,參數較少還不是很麻煩,要是參數較多就存在問題,畢竟搜索框中鏈接的長度是有限的,另外就是參數過於的暴露,不是很友好的方式。
方式二:在方式一的基礎上,在跳轉的過程中,就將請求的最終數據封裝到域中,而不是將參數保存到域中,減少一次請求,這種方式同樣具有方式一的缺點。不算是友好的方式。
方式三(重點):cookie實現請求數據的封裝
第一步:將需要使用的參數存儲到cookie中,然後直接跳轉到目標頁面
第二步:在目標頁面從cookie中取值,取出需要的參數,將參數存儲到頁面的全局變量中
第三步:發送ajax請求,帶上參數,獲取頁面需要加載的數據,將數據顯示出來
第四步:定義一個頁面加載完畢事件,在頁面加載結束後,將cookie攜帶的參數清除
優點:
1、cookie攜帶數據,不需要在鏈接中拼接參數;
2、在目標頁面加載結束後,將cookie清除,可以相對保證數據安全,在整個操作過程中cookie存在的時間很短;
3、cookie清除後,可以防止cookie共享數據的污染,如兩個頁面的cookie對應的path屬性相同且變量名相同,就會導致修改一個頁面的cookie參數,另一個頁面的cookie參數也會變化,造成數據污染;
4、cookie清除後,可以防止cookie數量超過限制,一個域名下存儲的cookie是有限的;
缺點:
1、由於參數保存在頁面的全局變量中,會造成刷新頁面,數據丟失問題,但是這個問題並不是太大,因爲現在大多都是採用異步請求局部刷新的方式,一般不會導致數據丟失;
2、不同的瀏覽器存在cookie的存儲差異,可能會存在問題,但是這個問題也不大,因爲主流瀏覽器都能完美支持,不會出現這種情況。
代碼的實現:
1、 jQuery自身是沒有cookie的保存、取出、刪除的功能,需要自己添加jQuery的cookie插件,這裏提供給大家。
<script src="https://code.csdn.net/snippets/1557059.js"></script>
2、 在頁面中存儲cookie的值
Ø 默認路徑存儲cookie的值
$.cookie("test","aabbcc");
Ø 自定義路徑存儲cookie的值
$.cookie("test","aabbcc",{path: "/web/test/list"});
注意這裏設置的路徑,在取cookie值的頁面中,頁面要是這個路徑的子路徑或者相同路徑,否則無法取到cookie中的值
3、在頁面中取出cookie的值
var cookie_value = $.cookie("test");
cookie_value就是cookie中存在的值
4、在頁面刪除cookie值
Ø 頁面加載結束清除cookie值
<script src="https://code.csdn.net/snippets/1557048.js"></script>
Ø 頁面關閉清除cookie值
<script src="https://code.csdn.net/snippets/1557051.js"></script>
上面的兩種清理方式其實是一樣的,主要是相說明這兩個事件。
這些都是在開發過程遇到的問題,和團隊討論的結果,希望對博友們有所幫助。有什麼問題記得留言哦,大家可以一起討論。