Cookies

Introduction

Cookies are small pieces of information that your website stores in your browser. They act as long-term memory, allowing you to remember important details about yourself and your preferences even after closing the page or the browser.

Why use cookies?

• Personalization: Cookies allow you to remember your name, language preferences, color theme choices, or other information that will help you have a more personalized experience on your website.
• Authentication: Cookies are commonly used to store authentication tokens, allowing your application to remember that a user is logged in and keep them authenticated while navigating your site.
• Tracking and analysis: You can use cookies to track user behavior on your website, collecting information about the pages they visit, the products they view, and other actions they take. This helps you better understand your users and optimize your site for a better experience.
• Shopping carts and similar functionalities: Cookies are essential for temporarily storing information about a user's shopping cart, allowing them to add and remove products without losing their selection while browsing the site.

Creating and Managing Cookies in the Data Store Panel

In the Data Store Panel, you will find the "Cookies" section where you can:

• View existing cookies: You will see a list of all the cookies you have created, along with their current values.
• Create new cookies: Click the "+" button and define a unique name and lifetime for your cookie.
• Edit cookies: Click on an existing cookie to edit its name or value.
• Delete cookies: Click on the cookie you want to delete, then click the trash can icon to delete it.

Cookie Settings Options

• Name: Choose a descriptive name for your cookie.
• Lifetime: Choose how long you want the cookie to remain stored in the user's browser:
  • 1 day, 7 days, 30 days, 1 year: The cookie value will persist for the selected time period, even if the user closes the browser.
  • Custom: You can specify the exact number of days you want the cookie to remain active.

Once you've created your cookies in the Data Store Panel, you can access and use them in the Function Editor to create conditional logic, customize messages, control element visibility, and more.

Cookies and the Function Editor

To access the value of a cookie in the Function Editor, use the prefix c followed by the name of the cookie. For example, if you have a cookie named preferredTheme, you can access its value using c.preferredTheme.

Cookies and Reactivity

Like variables, cookies in Wized are reactive. This means that any change in their value, whether through an action or directly in the Data Storage Panel, will trigger an automatic update of the configurations of the elements that depend on them.

• Example:

  Imagine that you have a button that, when clicked, changes the color theme of your website and stores the user's preference in a cookie named preferredTheme. You also have several elements on your page whose Set Style configurations depend on the value of this cookie.

  1. Event: When the button is clicked
  2. Action: Set Cookie to update the value of the preferredTheme cookie with the new theme selected by the user.
  3. Reactivity: Wized detects the change in the cookie and re-evaluates the conditions of all Set Style configurations that depend on it. The styles of the elements will automatically update to reflect the new theme chosen by the user, without the need to reload the page!

Variables vs. Cookies:

• Variables: These are ideal for storing temporary data that you only need while the user interacts with your application on the currently selected page. Their value is lost when the page is reloaded or the browser is closed.
• Cookies: These are perfect for storing information that you want to retain between sessions, such as user preferences, authentication data, or the contents of a shopping cart. Keep in mind that cookies can persist beyond the browsing session.