在開(kāi)發(fā)Web應(yīng)用程序時(shí)，我們經(jīng)常需要存儲(chǔ)一些用戶(hù)信息以及偏好設(shè)置。為了實(shí)現(xiàn)這個(gè)目標(biāo)，通常會(huì)使用cookie。cookie是一種可以在用戶(hù)終端中存儲(chǔ)小量數(shù)據(jù)的技術(shù)。雖然cookie看起來(lái)很簡(jiǎn)單，但是在vue中存儲(chǔ)中文cookie卻需要一些小技巧。

首先，讓我們快速回顧一下cookie是如何工作的。當(dāng)用戶(hù)訪(fǎng)問(wèn)某個(gè)網(wǎng)站并提供登錄憑證時(shí)（如用戶(hù)名和密碼），網(wǎng)站會(huì)向用戶(hù)終端發(fā)送一個(gè)cookie。這個(gè)cookie被終端存儲(chǔ)起來(lái)，并在隨后的請(qǐng)求中發(fā)送回服務(wù)器。服務(wù)器通過(guò)檢查cookie中存儲(chǔ)的內(nèi)容，可以識(shí)別用戶(hù)并提供定制的Web應(yīng)用程序。

//set cookie
document.cookie = "username=張三";
//get cookie
const cookies = document.cookie.split(';')
let username = ""
for (let i = 0; i< cookies.length; i++) {
const [name, value] = cookies[i].trim().split('=')
if (name === 'username') {
username = value;
}
}

在vue中存儲(chǔ)中文cookie時(shí)，需要使用encodeURIComponent()方法對(duì)中文字符進(jìn)行編碼。因?yàn)樵赾ookie中，中文字符需要以URL編碼的方式進(jìn)行傳輸。如果不進(jìn)行編碼，會(huì)導(dǎo)致cookie存儲(chǔ)不正常。

//set cookie with encode
const ChineseName = "李四"
const encodedName = encodeURIComponent(ChineseName)
document.cookie = "name=" + encodedName;
//get cookie with decode
const cookies = document.cookie.split(';')
let name = ""
for (let i = 0; i< cookies.length; i++) {
const [key, value] = cookies[i].trim().split('=')
if (key === 'name') {
name = decodeURIComponent(value);
}
}

如果要存儲(chǔ)多個(gè)cookie，可以使用JSON.stringify()和JSON.parse()方法對(duì)對(duì)象進(jìn)行處理。將對(duì)象字符串化后，再將其賦值到cookie中。取回cookie時(shí)，再將cookie字符串解析成對(duì)象。

//set multiple cookie with JSON
const user = {
name: "王五",
age: 20,
sex: "男"
}
const encodedUser = encodeURIComponent(JSON.stringify(user))
document.cookie = "userInfo=" + encodedUser;
//get multiple cookie with JSON
const cookies = document.cookie.split(';')
let userInfo = {}
for (let i = 0; i< cookies.length; i++) {
const [key, value] = cookies[i].trim().split('=')
if (key === 'userInfo') {
userInfo = JSON.parse(decodeURIComponent(value));
}
}

總之，存儲(chǔ)中文cookie在vue中需要注意編碼和解碼，同時(shí)也需要使用JSON方法對(duì)多個(gè)cookie進(jìn)行處理。可以根據(jù)不同的場(chǎng)景進(jìn)行選擇不同的方法。