Skip to content

Commit 0097660

Browse files
committed
Update README.md
1 parent 06e4a05 commit 0097660

File tree

1 file changed

+94
-12
lines changed

1 file changed

+94
-12
lines changed

README.md

Lines changed: 94 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -595,22 +595,104 @@ The defer attribute tells the browser to only execute the script file once the H
595595
<b><a href="#">↥ back to top</a></b>
596596
</div>
597597

598-
## Q. Describe the difference between a cookie, sessionStorage and localStorage?
598+
## Q. What is local storage in html5?
599+
600+
The **localStorage** read-only property of the window interface allows you to access a Storage object for the Document\'s origin; the stored data is saved across browser sessions.
601+
602+
**Example:**
603+
604+
```js
605+
// Store
606+
localStorage.setItem("name", "Kanti Ahluwalia");
607+
608+
// Retrieve
609+
localStorage.getItem("name"); // Kanti Ahluwalia
610+
```
611+
612+
<div align="right">
613+
<b><a href="#">↥ back to top</a></b>
614+
</div>
615+
616+
## Q. What is session storage in html5?
617+
618+
The **sessionStorage** object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.
619+
620+
**Example:**
621+
622+
```js
623+
// Save data to sessionStorage
624+
sessionStorage.setItem('key', 'value');
625+
626+
// Get saved data from sessionStorage
627+
let data = sessionStorage.getItem('key');
628+
629+
// Remove saved data from sessionStorage
630+
sessionStorage.removeItem('key');
631+
632+
// Remove all saved data from sessionStorage
633+
sessionStorage.clear();
634+
```
635+
636+
<div align="right">
637+
<b><a href="#">↥ back to top</a></b>
638+
</div>
639+
640+
## Q. What is cookies in html5?
599641

600-
**1. cookie:** A text file saved on the users computer to store and retrieve data
642+
A cookie is an amount of information that persists between a server-side and a client-side. A web browser stores this information at the time of browsing.
601643

602-
**2. sessionStorage:** Is memory space in a browser to save temporary data until the window or tab is closed.
644+
A cookie contains the information as a string generally in the form of a name-value pair separated by semi-colons. It maintains the state of a user and remembers the user\'s information among all the web pages.
603645

604-
**3. localStorage:** Like cookie, where data can be saved and retrieved after browser sessions, but stored in memory like sessionStorage. Data is stored as plain key value pairs and can be stored as Json objects.
646+
**Example 01:** Create a Cookies
647+
648+
```js
649+
// create a cookie
650+
document.cookie = "username=Anjali Batta";
651+
652+
// cookie with expiry date
653+
document.cookie = "username=Anjali Batta; expires=Thu, 18 Dec 2022 12:00:00 UTC";
654+
```
655+
656+
**Example 02:** Cookie with expiry date
657+
658+
```js
659+
// cookie with expiry date
660+
document.cookie = "username=Anjali Batta; expires=Thu, 18 Dec 2022 12:00:00 UTC";
661+
```
662+
663+
**Example 03:** Read Cookie
664+
665+
```js
666+
let myCookies = document.cookie;
667+
668+
console.log(myCookies);
669+
```
670+
671+
**Example 04:** Update Cookie
672+
673+
```js
674+
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
675+
```
676+
677+
**Example 05:** Delete Cookie
678+
679+
```js
680+
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
681+
```
682+
683+
<div align="right">
684+
<b><a href="#">↥ back to top</a></b>
685+
</div>
686+
687+
## Q. Describe the difference between a cookie, sessionStorage and localStorage?
605688

606-
| | `cookie` | `localStorage` | `sessionStorage` |
607-
| -------------------------------------- | -------------------------------------------------------- | -------------- | ---------------- |
608-
| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
609-
| Expiry | Manually set | Forever | On tab close |
610-
| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
611-
| Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No | No |
612-
| Capacity (per domain) | 4kb | 5MB | 5MB |
613-
| Accessibility | Any window | Any window | Same tab |
689+
| | `cookie` | `localStorage` | `sessionStorage` |
690+
|------|-----------|----------------|------------------|
691+
| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
692+
| Expiry | Manually set | Forever | On tab close |
693+
| Persistent across browser sessions | Depends on whether expiration is set | Yes | No | | Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No | No |
694+
| Capacity (per domain) | 4kb | 5MB | 5MB |
695+
| Accessibility | Any window | Any window | Same tab |
614696

615697
*Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any `cookie`, `localStorage`, or `sessionStorage` stored. It\'s important to keep this in mind when designing for local persistance, especially when comparing to alternatives such as server side storing in a database or similar (which of course will persist despite user actions).*
616698

0 commit comments

Comments
 (0)