h5學習筆記：sessionStorage 小測試

hero82748274發表於2019-03-11
H5筆記Session

第一次接觸淘寶的開發業務， 昨晚陪著同學晚上加班到2點多，因為要接手一個臨時專案遇到一個小問題，就是淘寶的使用者ID 在頁面重新整理後，請求介面會出現錯誤。原因是之前寫的人沒有處理好快取ID這個邏輯。在淘寶沒有授權的之前是拿不到淘寶ID。而很多介面都要依賴這個ID，所以在緊急情況下，使用了本地快取的方法（window.localStorage）臨時處理一下，馬上修復線上的問題。

過了第二天，細想一下也可以使用sessionStorage ，在重新整理頁面之前那個id 還可以繼續保留。但關閉瀏覽器後就會清除。這樣可以不用處理localStorage 一直存在的問題。當然兩種方式都可以實現到相同的功能，不過還沒嘗試過sessionStorage，但這個功能也可以滿足到上述所說的簡單邏輯。等到關閉瀏覽器後又可以清除掉對應的快取。但對localStorage 其實也有好處，就是可以減少請求量，對於一個大量請求的業務來講，這可以減少伺服器請求的次數，也是有好處。不好的地方就是萬一localStorage 快取了錯誤的這樣在沒有加過期處理的時候就得重新修改邏輯了，判斷也會發生錯誤。很多使用者的本地快取就很難清理了。

下面是小小的測試。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<h1>sessionStorage 小測試</h1>
		
		<script type="text/javascript">
			
			 if(!window.sessionStorage.getItem("userid"))
			 {
			 	window.sessionStorage.setItem("userid","10000");
			 	console.log("進入這裡建立userid");
			 }
			 else
			 {
			 	console.log("已經存在了userid"+window.sessionStorage.getItem("userid"))
			 }
			
		</script>
		
	</body>
</html>

可以看到對應
在這裡插入圖片描述

在頁面重新整理多次後，快取依舊存在。待關閉瀏覽器後 if(!window.sessionStorage.getItem(“userid”)) 的判斷條件又會再次生效。
在這裡插入圖片描述

相關文章