操纵饼干 (Manipulating Cookies)
Getting or setting cookies is a straightforward operation that can be achieved by accessing the cookie property on the browser’s document object.
获取或设置cookie是一项简单的操作,可以通过访问浏览器文档对象上的cookie属性来实现。
Let's say you find an amazing and informative recipe website to cook a fun meal for your guests but it’s in foreign language. Luckily you are able to change the language on the website using a dropdown.
假设您找到了一个令人惊叹且信息丰富的食谱网站,为您的客人烹制一顿有趣的饭菜,但它是外语。 幸运的是,您可以使用下拉菜单更改网站上的语言。
A couple of days later you visit the same site again to make a dish for your mother, but now you see the website in your native language by default.
几天后,您再次访问同一站点为母亲做菜,但现在默认情况下您会以您的母语看到该网站。
How'd that happen? The website remembers the language you selected on your last visit and stores it in the form of a cookie. Now it automatically selects your preferred language by reading that cookie.
怎么会这样 该网站会记住您上次访问时选择的语言,并将其存储为cookie形式。 现在,它会通过读取Cookie自动选择您的首选语言。
userLanguage:french
userLanguage:french
Cookies are used to store data in the form of name:value
pairs on the client side. They let a website store user specific information on the browser for later use. The stored information could be sessionID
, userCountry
, visitorLanguage
and so on.
Cookies用于在客户端以name:value
对的形式存储数据。 他们让网站将用户特定的信息存储在浏览器中,以供以后使用。 存储的信息可以是sessionID
, userCountry
, visitorLanguage
等。
Another way to store the data on the client side is localstorage
.
在客户端存储数据的另一种方法是localstorage
。
设置Cookie (Set Cookie)
A cookie can be set using the syntax below. But a library, like the one mentioned at the end, is highly recommended to make development easier for everyone.
可以使用以下语法设置Cookie。 但是,强烈建议您像结尾处提到的那样使用一个库,以使每个人都更容易开发。
While setting the cookie, you can set the expiration date for it as well. If you skip this, the cookies are erased when the browser is closed.
设置cookie时,您也可以设置其过期日期。 如果您跳过此步骤,则在关闭浏览器时将清除cookie。
Keep in mind that a cookie set by a particular domain can only be read by that domain & its subdomains only.
请记住 , 由特定域设置的Cookie只能由该域及其子域读取。
// Using vanilla javascript
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
//Using JS cookie library
Cookies.set('userLanguage', 'french', { expires: 7, path: '/' });
The above cookie expires in 7 days.
上面的cookie将于7天后过期。
取得Cookie (Get Cookie)
// Using vanilla javascript
console.log(document.cookie)
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
// Using JS cookie library
Cookies.get('userLanguage');
// => "french"
删除Cookie (Delete Cookie)
In order to delete a cookie set the expiration date to something in the past.
为了删除Cookie,请将过期日期设置为过去的某个日期。
// Using vanilla javascript
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
//Using JS cookie library
Cookies.remove('userLanguage');
If you find yourself playing with cookies a lot in your project, please use a library like this JS Cookie and save yourself a ton of time.
如果您发现自己在项目中经常使用Cookie ,请使用像JS Cookie这样的库来节省大量时间。
翻译自: https://www.freecodecamp.org/news/what-are-cookies-on-the-web-and-how-do-you-use-them/