9. Window and Cookies in Javascript

 

 Window Object in JavaScript:

The window object is a global object in the browser's JavaScript environment. 

It represents the browser window or frame and provides various properties and methods for interacting with it.

Properties of the window Object:

1. window.innerWidth and window.innerHeight:

   - Return the inner width and height of the browser window.

2. window.outerWidth` and `window.outerHeight:

   - Return the outer width and height of the browser window including toolbars and scrollbars.

3. window.location:

   - Provides information about the current URL and allows navigation to other URLs.

4. window.document:

   - Represents the DOM (Document Object Model) of the current page.

5. window.navigator:

   - Provides information about the browser and its capabilities.

6. window.localStorage and window.sessionStorage:

   - Allow storage of key-value pairs persistently or for the duration of the page session, respectively.

Methods of the window Object:

1. window.alert(message):

   - Displays a dialog box with a specified message and an OK button.

2. window.confirm(message):

   - Displays a dialog box with a specified message, an OK button, and a Cancel button. Returns `true` if OK is pressed, and `false` otherwise.

3. window.prompt(message, default):

   - Displays a dialog box with a message and an input field for the user to enter text. Returns the entered text or `null` if canceled.

4.window.open(url, name, features):

   - Opens a new browser window or a new tab with the specified URL, name, and features.

5.window.close():

   - Closes the current browser window.

6. window.setTimeout(function, milliseconds):

   - Calls a function or evaluates an expression after a specified delay.

7. window.setInterval(function, milliseconds):

   - Calls a function or evaluates an expression repeatedly at specified intervals.

8. window.clearTimeout(timeoutID) and window.clearInterval(intervalID):

   - Cancels a timeout or interval set by `setTimeout` or `setInterval`, respectively.

Cookies in JavaScript

What are Cookies ?

Cookies are small pieces of data that websites store on a user's device, typically in the form of a text file. These files contain information about the user and their interactions with the website. Cookies serve various purposes, such as session management, personalization, tracking user behavior, and storing user preferences.

How Cookies Work:

- Creation: When you visit a website for the first time, the server may send a request to your browser to store a small file (cookie) on your device.

- Storage: The browser then stores this cookie on your device. Cookies contain information such as user preferences, session data, or tracking information.

- Subsequent Requests: When you revisit the same website or navigate to a different page on the same site, your browser sends the stored cookies back to the server along with the request. This allows the server to recognize and remember you.

- Server-Side Processing: The server processes the information in the cookies and can use it to tailor the web experience, maintain session information, or track user behavior.

In web development, cookies are small pieces of data stored on the user's computer by the web browser. They are often used to store information such as user preferences or session data. 

In JavaScript, you can interact with cookies using the `document.cookie` object.

 Let's go through some methods and properties related to cookies.

Properties:

1. document.cookie:

   - This property is a string that contains all the cookies associated with the current document.

   - You can both read and write to this property to get or set cookies.

   // Get all cookies

   const allCookies = document.cookie;

   // Set a cookie

   document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

   

 Methods:

1. Setting a Cookie:

   - You can set a cookie by assigning a string to `document.cookie`. The string should be in the form "key=value".

   document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

   

2. Getting a Cookie:

   - To get the value of a specific cookie, you need to parse `document.cookie` to find the desired cookie.

   Syntax : 

   const cookies = document.cookie.split("; ");

   for (const cookie of cookies) {

     const [key, value] = cookie.split("=");

     if (key === "username") {

       console.log("Username:", value);

       break;

     }

   }

   

3. Deleting a Cookie:

   - To delete a cookie, you can set its expiration date to a past date.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

4. Other Attributes : 

   - You can set additional attributes like `expires`, `path`, `domain`, and `secure` when creating or modifying a cookie.

   document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/; domain=example.com; secure";

These are basic examples, and you may need to handle cookies more robustly in a real-world scenario, especially regarding security and privacy considerations. Always be cautious about the data you store in cookies and handle them securely.