項目cookie優化之cookie數量限制和多頁面共享污染數據問題(個人項目經驗)

在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>

上面的兩種清理方式其實是一樣的,主要是相說明這兩個事件。

這些都是在開發過程遇到的問題,和團隊討論的結果,希望對博友們有所幫助。有什麼問題記得留言哦,大家可以一起討論。

發佈了44 篇原創文章 · 獲贊 68 · 訪問量 54萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章