最近負責的系統總是出現奇怪的緩存問題，在這里簡單記錄一下碰到的問題和踩到的坑。

問題：用戶反映使用不同賬號A，B登錄時，都出現賬號A的頁面信息(未郵寄賬單提示)。如下所示：

圖1：未郵寄賬單提示

一? session緩存問題

鑒于之前也出現過類似的session緩存問題，session的key信息未清除。

如果A用戶切換至B用戶時，使用了不同的session key如‘U’，‘U_P’保存不同的信息，但是切換后只清除了'U'信息，忘記清除'U_P'信息，則可能導致A用戶和B用戶看到同樣的‘U_P’信息。查看此處的代碼也確實使用了seesion緩存：

圖2：未郵寄賬單session緩存

是不是這個原因引起的呢，之前的這個問題按說已經修復了，難道還有啥代碼沒改？查看代碼，切換用戶的時候移除了session的內容，登出賬號的時候也失效掉了session信息。

圖3：session清除

通過查看后臺服務器日志，發現A用戶登錄后調用了/un-post-billls-GET鏈接，獲取到了未郵寄賬單信息。但是B用戶的后臺日志沒有找到調用過后臺的鏈接，所以排除了后臺session緩存錯誤的可能。后臺日志就不上圖了，^_^。

二 瀏覽器本地緩存問題

由于B用戶根本就沒有調用后臺服務，就拿到了未郵寄賬單的信息，我們認為很大可能是瀏覽器本地緩存引起的問題。

1 Localstorage緩存

查看前端代碼，在查詢未郵寄賬單信息時，使用了HTML5的window.localStorage來保存用戶的信息，代碼如下：

圖4:localstorage緩存

并沒有看到對localStorage的clear操作，這樣可能是有問題的：A用戶登錄后在localstorage保存了未郵寄賬單信息，切換至B用戶后由于沒有clear A用戶的localstorage 信息。那么B用戶就看到了A用戶的本地緩存信息。

解決辦法：在合適的時機清理localstorage，使用不同的key 保存緩存信息。

2 瀏覽器url緩存

這個bug是否就這樣解決了呢？仔細看圖4的localstorage代碼，A用戶和B用戶實際上使用了不同的dataKey_A與dataKey_B來保存各自的localStorage，雖然說有一定的安全問題，但是由于不同的KEY存在，按道理說B用戶不會看到A用戶的未郵寄賬單信息。問題可能不在localStorage這里。

根據 HTTP 規范，GET 用于信息獲取，而且應該是冪等的。也就是說，當使用相同的URL重復GET請求會返回預期的相同結果。這個問題與現在的情況非常相似。

查看代碼，使用了相同的URL請求重復GET：

圖5：URL請求GET

解決辦法：

1. GET請求URL后加隨機數，讓服務器認為不是相同的請求。

例 “/un-post-bills?t=” + new Date().getTime()

2. 使用POST代替GET，瀏覽器不會對POST做緩存

三 總結

WEB系統的緩存通常有好幾級，本地緩存，服務器緩存，數據庫緩存等。分析緩存問題時，要考慮每一層可能引起的問題，每一層的緩存技術也有很多種，要根據具體的場景來選擇使用何種緩存技術。

緩存技術博大精深，本文只記錄尋找bug時涉及的技術，其他有待學習。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html本地缓存未查看信息,不同用户看到了相同的信息-一次web系统缓存问题的解决...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。