最近負(fù)責(zé)的系統(tǒng)總是出現(xiàn)奇怪的緩存問(wèn)題，在這里簡(jiǎn)單記錄一下碰到的問(wèn)題和踩到的坑。

問(wèn)題：用戶(hù)反映使用不同賬號(hào)A，B登錄時(shí)，都出現(xiàn)賬號(hào)A的頁(yè)面信息(未郵寄賬單提示)。如下所示：

圖1：未郵寄賬單提示

一? session緩存問(wèn)題

鑒于之前也出現(xiàn)過(guò)類(lèi)似的session緩存問(wèn)題，session的key信息未清除。

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

圖2：未郵寄賬單session緩存

是不是這個(gè)原因引起的呢，之前的這個(gè)問(wèn)題按說(shuō)已經(jīng)修復(fù)了，難道還有啥代碼沒(méi)改？查看代碼，切換用戶(hù)的時(shí)候移除了session的內(nèi)容，登出賬號(hào)的時(shí)候也失效掉了session信息。

圖3：session清除

通過(guò)查看后臺(tái)服務(wù)器日志，發(fā)現(xiàn)A用戶(hù)登錄后調(diào)用了/un-post-billls-GET鏈接，獲取到了未郵寄賬單信息。但是B用戶(hù)的后臺(tái)日志沒(méi)有找到調(diào)用過(guò)后臺(tái)的鏈接，所以排除了后臺(tái)session緩存錯(cuò)誤的可能。后臺(tái)日志就不上圖了，^_^。

二 瀏覽器本地緩存問(wèn)題

由于B用戶(hù)根本就沒(méi)有調(diào)用后臺(tái)服務(wù)，就拿到了未郵寄賬單的信息，我們認(rèn)為很大可能是瀏覽器本地緩存引起的問(wèn)題。

1 Localstorage緩存

查看前端代碼，在查詢(xún)未郵寄賬單信息時(shí)，使用了HTML5的window.localStorage來(lái)保存用戶(hù)的信息，代碼如下：

圖4:localstorage緩存

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

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

2 瀏覽器url緩存

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

根據(jù) HTTP 規(guī)范，GET 用于信息獲取，而且應(yīng)該是冪等的。也就是說(shuō)，當(dāng)使用相同的URL重復(fù)GET請(qǐng)求會(huì)返回預(yù)期的相同結(jié)果。這個(gè)問(wèn)題與現(xiàn)在的情況非常相似。

查看代碼，使用了相同的URL請(qǐng)求重復(fù)GET：

圖5：URL請(qǐng)求GET

解決辦法：

1. GET請(qǐng)求URL后加隨機(jī)數(shù)，讓服務(wù)器認(rèn)為不是相同的請(qǐng)求。

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

2. 使用POST代替GET，瀏覽器不會(huì)對(duì)POST做緩存

三 總結(jié)

WEB系統(tǒng)的緩存通常有好幾級(jí)，本地緩存，服務(wù)器緩存，數(shù)據(jù)庫(kù)緩存等。分析緩存問(wèn)題時(shí)，要考慮每一層可能引起的問(wèn)題，每一層的緩存技術(shù)也有很多種，要根據(jù)具體的場(chǎng)景來(lái)選擇使用何種緩存技術(shù)。

緩存技術(shù)博大精深，本文只記錄尋找bug時(shí)涉及的技術(shù)，其他有待學(xué)習(xí)。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。