# 
## Introduction

The need to store data in software programs cannot be overemphasized. 

On the web, we can use the web browser's storage to save some data on the user's machine, which your code can access when it is next executed on that browser.

# 
## Storing data with HTML 5

With #key# HTML: HyperText Markup Language #key# 5, there are two basic ways to do this, known as **web storage objects**. 

They are as follows:

1. **`windows.localStorage`**
2. **`window.sessionStorage`**

## 
### Local storage vs session storage 

The difference between the two objects is that `window.localStorage` retains stored data until the data is removed, which can be any length of time longer than that stored by `window.sessionStorage`. 

`window.sessionStorage` is just for a single session and can be destroyed when the browser is closed.

## 
### Checking client browser support

It is best to check that the client browser supports the HTML storage objects, although this is supported by virtually all modern browsers today. 

We can check this support using the HTML `<script> ... </script>` code below.

---
```
if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  //Error message: Hi! please Use a supported browser.
}
```

# 
## How to store data using the storage objects 

## 
##  The `localStorage` Object

This object will store data in the browser's local storage almost permanently until it is removed.

###
### Syntax
### 
###  1. To store

---
```
localStorage.setItem("key", "value");
```
---

####
#### 2. To retrieve

---
```
document.getElementById("htmlElement").innerHTML = localStorage.getItem("value");
```
---

## 
##  Explanation of syntax

The parameter of the `localStorage` object method `setItem` is the key that will point to the value to be saved.  

The `setItem` method is used to collect details about the data to be saved.

###
### Code

In the code we saved the weekday, Monday, using the `setItem()` method and retrieved it using the `getItem()` method, which is both a method of the `localStorage` object.

<!DOCTYPE html>
<html>
  <body>
    <div id="store"></div>

    <script>
    
    // Check browser support
    if (typeof(Storage) !== "undefined") {
    // Store
      localStorage.setItem("weekday", "Monday");
    // Retrieve
     document.getElementById("store").innerHTML = localStorage.getItem("weekday");
    } else {
    document.getElementById("store").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
    </script>

  </body>
  </html>

codemirror

# 
## The `sessionStorage` object

This second HTML storage object saves the data of concern for just a single session. The saved data is deleted when the browser is closed.

## 
##  Syntax

---
```
sessionStorage.AnyMethodOfChoice(args)
```
---

The `sessionStorage` object has several methods which it can use. 

See the below code for practical use of the `sessionStorage` object. 

###
### Code

In the below code, the `clickcount()` method was used to increase a counter based on how many times a user from a particular session clicked a button.

<!DOCTYPE html>
<html>
    <body>

        <p><button onclick="clickCounter()" type="button">Click me!</button></p>
        <div id="result"></div>
        <p>Click the button to see the counter increase.</p>
        <p>Close the browser tab (or window), and try again, and the counter is reset.</p>

    </body>
</html>



What is the HTML 5 web storage?

HTML 5 web storage allows saving data locally via `localStorage` for persistent storage or `sessionStorage` for session data.

What is the HTML 5 web storage?

Introduction

Storing data with HTML 5

Local storage vs session storage

Checking client browser support

How to store data using the storage objects

The localStorage Object

Syntax

1. To store

2. To retrieve

Explanation of syntax

Code

The sessionStorage object

Syntax

Code

The `localStorage` Object

The `sessionStorage` object