Site icon Learn Web Development & Programming, Artificial Intelligence, WordPress, Shopify Articles

Set and Get Data in Cookies with JavaScript

Set and Get Data in Cookies with JavaScript

What are Cookies?

A cookie is a small data file that your browser saves on your computer, allowing it to be accessed later. You might have experienced the advantages of cookies, whether you’re aware of it or not. For instance, have you ever opted to save your Facebook password so you don’t need to type it each time you log in? If so, you’re actually utilizing cookies. These cookies are stored as key/value pairs, enabling your browser to remember certain information for improved user experience.

Why do you need a Cookie?

Cookies are used to store small pieces of data on a user’s web browser. They serve various purposes and are commonly utilized for the following reasons:

  1. Session Management: Cookies are often used to manage user sessions on websites. When you log in to a website, a session cookie is created, allowing the server to recognize you as the same user during your visit. This helps maintain your logged-in state across different pages on the website.
  2. Personalization: Cookies can store user preferences and settings, enabling websites to personalize the user experience. For instance, a website might remember your language preference or theme choice through cookies.
  3. Tracking and Analytics: Cookies are employed to track user behavior on websites. This data is valuable for website owners to understand user interactions, improve website usability, and gather analytics for better decision-making.
  4. Shopping Carts and E-commerce: Cookies are used to maintain the contents of a user’s shopping cart during an online shopping session. This ensures that items remain in the cart even if the user navigates to different pages.
  5. Remembering User Information: Cookies can remember user details, such as usernames and passwords, to facilitate automatic login for returning users.

JavaScript cookies are a convenient and lightweight method to store data on the client side without requiring server-side scripting. The “document. cookie” property is commonly used to generate, read, edit, and delete cookies in JavaScript, making it easy to manage small amounts of data within the user’s browser. However, it’s important to note that cookies have limitations in terms of storage capacity and security, and their use should be balanced with considerations for user privacy and data protection.

Set-Cookie with Javascript

you can use the document.cookie property to create a cookie using JavaScript.

By default, when you create a cookie without specifying an expiry date, it becomes a “session cookie.” Session cookies are temporary and are stored only for the duration of the user’s browsing session. Once the user closes the browser, these cookies are automatically deleted.

On the other hand, if you want the cookie to persist beyond the current session, you can set an expiry date for the cookie. The expiry date is specified in UTC/GMT format and determines when the cookie should be deleted from the user’s computer.

When you set an expiry date for the cookie, it becomes a “persistent cookie.” Persistent cookies remain on the user’s computer even after they close the browser, and they will persist until the specified expiry date is reached.

To create a persistent cookie in JavaScript, you can use the “document.cookie” property and set the “expires” attribute to the desired date in UTC/GMT format. For example:

By setting the “expires” attribute, the cookie will be removed from the user’s computer on the specified date, even if they close and reopen the browser before that date. You can also specify the domain and path attributes to control which domain and directories the cookie belongs to. This allows you to manage the scope and accessibility of the cookie.

With the above code, the cookie “myCookie” will be associated with the domain “example.com” and will only be accessible on pages within the “/products” directory of that domain.

Read or Get Cookie with JavaScript

You can access the cookie and retrieved using the document.cookie property.

Delete Cookie using JavaScript

To delete a cookie, you only need to set the value of the cookie to empty and set the value of the cookie to expire on the passed date.

Change Cookie Value with JavaScript

Cookie value can be changed in the same way it created.

Now, we’re going to build some custom functions to set, get, and delete cookies in JavaScript. These JavaScript functions can have a user-friendly way to use cookies on the web page.

Set-Cookie

The following setCookie() function helps to create a cookie with a specific name and value using JavaScript.

Note that: The “/” means that the cookie will be available in the entire website domain.

For Example:

The above code is used to set a cookie named name with the value Tutorialswebsite for 5 days.

Get Cookie

getCookie() the function helps to retrieve the value of a predefined cookie using JavaScript.

For Example:

The above code is used to get the value of the cookie name.

Delete Cookie

The deleteCookie() function helps to remove cookie using JavaScript.

For Example:

The above code is used to remove the cookie name.

Try below Example code yourself

Conclusion

If you’d like to store cookie data on your website, the JavaScript cookie would be very useful. You can use these custom functions to handle JavaScript cookies. Well, I hope you found this tutorial helpful for your project. Keep learning!.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request

Exit mobile version