.github
api-server
client
config
curriculum
docs
guide
arabic
chinese
english
3d
accessibility
agile
algorithms
android-development
angular
angularjs
apache
aspnet
bash
blockchain
book-recommendations
bootstrap
bsd-os
bulma
c
canvas
certifications
chef
clojure
cloud-development
computational-genomics
computer-hardware
computer-science
containers
cplusplus
csharp
css
d3
data-science-tools
design-patterns
designer-tools
developer-ethics
developer-tools
devops
docker
documentation
electron
elixir
elm
erlang
game-development
gatsbyjs
git
go
groovy
haskell
hibernate
html
ionic
java
javascript
additional-javascript-resources
advantages-and-disadvantages-of-javascript
angularjs-interview-questions
arguments
arithmetic-operation
arrow-functions
assignment-operators
async-messaging-with-rabbitmq-tortoise
await-promises
booleans
callback-functions
classes
closures
code-blocks
code-linting-in-javascript
comments
comparison-operators
concurrency-model-and-event-loop
conditional-ternary-operators
converting-strings-to-numbers
error-handling-and-try-catch-throw
es6
falsy-values
form-validation
function-composition
function-invocation
functions-list
get-timestamp
global-object
global-variables
higher-order-functions
html-dom
html-dom-getelementbyid-method
html-dom-innerhtml-property
html-dom-queryselector
if-else-statement
immediately-invoked-functions-expressions
immutable-types
location-object
location-reload-method
logical-operators
loops
manipulate-javascript-objects
manipulating-cookies
index.md
multiply-two-numbers-with-javascript
naming-convention-for-javascript
numbers
object-instantiation
onclick-event
onload-event
output
popup-boxes
promises
prototypes
random-method
regular-expressions-reference
rest-parameters
return-statements
scopes
semicolons
singleton-in-javascript
spread-syntax
standard-objects
strict-mode
switch-statements
template-literals
ternary-operator
this-reference
timing-events
truth-table
truthy-values
tutorials
typeof
undefined-primitive-values
where-to
window-clearinterval-method
window-cleartimeout-method
window-confirm-method
window-localstorage
window-location
window-open-method
window-setinterval-method
window-settimeout-method
with
index.md
joomla
jquery
julia
kotlin
laravel
linux
logic
machine-learning
mathematics
meta
miscellaneous
mobile-app-development
mongodb
natural-language-processing
neovim
network-engineering
nginx
nodejs
php
product-design
progressive-web-apps
puppet
python
r
react
react-native
redux
rest-api
robotics
rt-os
ruby
rust
security
semantic-ui
software-engineering
sql
ssh
svg
svn
swift
terminal-commandline
tools
typescript
typography
user-experience-design
user-experience-research
vagrant
vim
virtualbox
visual-design
voice
vue
vue-cli
web-augmented-reality
web-components
web-performance
web-virtual-reality
wordpress
working-in-tech
xml
portuguese
russian
spanish
news
tools
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.node-inspectorrc
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
README.md
docker-compose-shared.yml
docker-compose.yml
lerna.json
netlify.toml
package-lock.json
package.json
sample.env
70 lines
2.7 KiB
Markdown
70 lines
2.7 KiB
Markdown
![]() |
---
|
||
|
title: Manipulating Cookies
|
||
|
---
|
||
|
## Manipulating Cookies
|
||
|
|
||
|
Getting or setting cookies is a straightforward operation that can be achived by accessing the cookie property on the browser's document object.
|
||
|
|
||
|
You find an amazing and informative recipe website to cook a foreign meal for your guests but it's in foreign language, luckily you are able to change the language on the site website using a selection 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.
|
||
|
|
||
|
*The website remembers language you selected on your last visit and stores it in form of a **cookie**. Now it automatically selected your preferred language by reading that cookie.*
|
||
|
|
||
|
`userLanguage:french`
|
||
|
|
||
|
Cookies are used to store data in form of `name:value` pair on the client side part. It lets a website store user specific information on the browser for later use. The stored information could be `sessionID`, `userCountry`, `visitorLanguage` etc.
|
||
|
|
||
|
Another way to store the data on the client side is `localstorage`.
|
||
|
|
||
|
### 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. While setting the cookie, you can set the expiry for it as well. If skipped, cookie is erased when browser is closed.
|
||
|
|
||
|
**Keep in mind a cookie set by a particular domain can only be read by that domain & it's subdomains only.**
|
||
|
|
||
|
```javascript
|
||
|
// 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: '/' });
|
||
|
```
|
||
|
*Cookie expires in 7 days*
|
||
|
|
||
|
|
||
|
### Get Cookie
|
||
|
|
||
|
|
||
|
```javascript
|
||
|
// Using vanilla javascript
|
||
|
console.log(document.cookie)
|
||
|
|
||
|
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
|
||
|
|
||
|
// Using JS cookie library
|
||
|
Cookies.get('userLanguage');
|
||
|
|
||
|
// => "french"
|
||
|
|
||
|
```
|
||
|
|
||
|
|
||
|
### Delete Cookie
|
||
|
|
||
|
In order to delete a cookie set the expires date to something in the past.
|
||
|
|
||
|
```javascript
|
||
|
// 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](https://github.com/js-cookie/js-cookie) and save yourself a ton of time.*
|
||
|
|
||
|
#### More Information:
|
||
|
- [Cookie explained](https://www.quirksmode.org/js/cookies.html)
|
||
|
- [MDN Cookie Guide](https://developer.mozilla.org/en-US/docs/Web/API/document/cookie)
|
||
|
- [Udacity Cookie Video](https://www.youtube.com/watch?v=xdH9zsW1CK0)
|
||
|
- [HTTP cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)
|