Web儲存

儲存客戶端資料的物件

cookies

使用cookie儲存本地資料

cookies是傳統的本地資料儲存方法

使用cookie儲存一條 名為 cookieKey，值為 cookieValue，過期事件為 一個小時后 的代碼示例：

const laterHour = new Date()
laterHour.setHours(laterHour.getHours() + 1)	// 一個小時后的時間
document.cookie = `cookieKey=cookieValue;expires=${laterHour}`	// cookie的用法
console.log(document.cookie)	// cookieKey=cookieValue	控制臺輸出的cookie

執行完畢后，按 F12 打開 開發者工具，點擊 Application 中的 Cookies 可以看到剛才儲存的cookie資料

移除cookie 的資料很簡單，只需再次覆寫想要移除的cookie，再把它的過期時間設定為 負數 ，就可以移除了，具體代碼如下：

document.cookie = `cookieKey=cookieValue;expires=-1`	// 移除鍵為cookieKey的資料

獲取cookie 只能獲取整個cookie的資料，想要獲取某個鍵的值只能通過分割字串獲取資料，具體代碼如下：

const laterHour = new Date()
laterHour.setHours(laterHour.getHours() + 1)
document.cookie = `cookiesKey1=cookiesValue1;expires=${laterHour}`	// 儲存cookieKey1/cookieValue1
document.cookie = `cookiesKey2=cookiesValue2;expires=${laterHour}`	// 儲存cookieKey1/cookieValue2
document.cookie = `cookiesKey3=cookiesValue3;expires=${laterHour}`	// 儲存cookieKey1/cookieValue3
const cookie = document.cookie
console.log(cookie)	// cookiesKey1=cookiesValue1; cookiesKey2=cookiesValue2; cookiesKey3=cookiesValue3
const cookieArr = cookie.split('; ')	// 分割字串,分號
const cookieObj = {}
cookieArr.forEach(item => {
	const keyValue = https://www.cnblogs.com/WuMouRen/p/item.split('=')	// 再次分割
	cookieObj[keyValue[0]] = keyValue[1]
})
console.log(cookieObj.cookiesKey1)		// cookiesValue1
console.log(cookieObj.cookiesKey2)		// cookiesValue2
console.log(cookieObj.cookiesKey3)		// cookiesValue3

cookie的簡單封裝

實際應用上，向上面代碼那樣使用cookie是比較繁瑣的，尤其是在獲取資料時，我們得到的是一個一連串的 字串，通常情況下，我們想獲取的并不是這樣一個資料，而是想要某個對應 鍵 的 值，所以要對其封裝：

// 設定cookie過期時間
function afterDay(day){
	var time=new Date();
	time.setDate(time.getDate()+day);
	return time;
}
// 設定cookie，引數分別為 鍵， 值， 過期時間
function setCookies(key,value,expires){
	expires=afterDay(expires)
	document.cookie=`${key}=${value};expires=${expires}`;
}
// 獲取cookies的物件
function getCookies(){
	var cookies=document.cookie.split('; ');
	var cookiesArr=[];
	var cookiesObj={};
	cookieArr.forEach(item => {
		const keyValue = https://www.cnblogs.com/WuMouRen/p/item.split('=')
		cookieObj[keyValue[0]] = keyValue[1]
	})
	return cookiesObj;
}

創建一個名 cookies.js 檔案（名字隨意），將上面代碼復制保存，下面代碼將其引入使用即可簡單使用cookie：

<script src="https://www.cnblogs.com/WuMouRen/p/cookies.js"></script>
<script type="text/javascript">
	setCookies('cookieKey1', 'cookieValue1', '1')
	setCookies('cookieKey2', 'cookieValue2', '1')
	setCookies('cookieKey3', 'cookieValue3', '1')
	const cookie = getCookies()
	console.log(cookie.cookieKey1)	// cookieValue1
	console.log(cookie.cookieKey2)	// cookieValue2
	console.log(cookie.cookieKey3)	// cookieValue3
</script>

localStorage和sessionStorage

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

具體代碼如下：

localStorage.setItem('data1', 'msg1')   // 儲存資料方式1
localStorage.data2 = 'msg2'             // 儲存資料方式2
console.log(localStorage.data1)         // 獲取資料方式1
console.log(localStorage.data2)         // 獲取資料方式2
console.log(localStorage.key(0))        // 獲取索引的key值
localStorage.removeItem('data1')        // 移除單個資料
localStorage.clear()                    // 移除所有資料

同樣地，也可以再開發者工具中像查看Cookies資料查看 localStorage 和 sessionStorage，

注意：鍵/值對通常以字串存盤，譬如傳入value值為Number型別的數字1，實際儲存的是String的字串1，你可以按自己的需要轉換該格式，

以上實體只是演示了簡單的 localStorage 和 sessionStorage存盤與查找，更多情況下我們存盤的資料會更復雜，所以在實際應用中，通產使用 JSON 來儲存資料

標籤：HTML5

上一篇：Geolocation地理定位

下一篇：typescript撰寫微信小程式-創建專案