Today I have learned Local storage and Session storage in javascript

 Local storage and Session storage:

• To view the data stored in the session storage in the web browser, you click the Application tab and select the Session Storage: The sessionStorage allows you to store the data for session only. The browser will delete the sessionStorage data when you close the browser tab or window.
• • Format of storing data in SessionStorage and LocalStorage: Data must be stored in key-value pair in the SessionStorage and LocalStorage and key-value must be either number or string Here it can be seen that till we are inserting data in the form of string or number, we are able to get data correcrly!

  • LocalStorage, sessionStorage

    Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser.

    What’s interesting about them is that the data survives a page refresh (for sessionStorage) and even a full browser restart (for localStorage). We’ll see that very soon.

    We already have cookies. Why additional objects?

    • Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most modern browsers allow at least 5 megabytes of data (or more) and have settings to configure that.
    • Also unlike cookies, the server can’t manipulate storage objects via HTTP headers. Everything’s done in JavaScript.
    • The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other.

    Both storage objects provide the same methods and properties:

    • setItem(key, value) – store key/value pair.
    • getItem(key) – get the value by key.
    • removeItem(key) – remove the key with its value.
    • clear() – delete everything.
    • key(index) – get the key on a given position.
    • length – the number of stored items.

    As you can see, it’s like a Map collection (setItem/getItem/removeItem), but also allows access by index with key(index).

    Let’s see how it works.

    localStorage demo

    The main features of localStorage are:

    • Shared between all tabs and windows from the same origin.
    • The data does not expire. It remains after the browser restart and even OS reboot.

    For instance, if you run this code…

    localStorage.setItem('test', 1);

    …And close/open the browser or just open the same page in a different window, then you can get it like this:

    alert( localStorage.getItem('test') ); // 1

    We only have to be on the same origin (domain/port/protocol), the url path can be different.

    The localStorage is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one.

  •  this.state = {

          storedValue: localStorage.getItem('myValue') || '', // Retrieve value from local storage or default to an empty string

        };

      }

      handleInputChange = (event) => {

        const newValue = event.target.value;

    
    

        // Update state and store the new value in local storage

        this.setState({ storedValue: newValue });

        localStorage.setItem('myValue', newValue);

      };

      render() {

        return (

          <div>

            <h1>Local Storage Example</h1>

            <label>

              Type something:

              <input

                type="text"

                value={this.state.storedValue}

                onChange={this.handleInputChange}

              />

            </label>

    
    

     <p>Stored Value: {this.state.storedValue}</p>

          </div>

        );

      }

    }
  • Output:
  • 
    
    
    
    
  •  this.state = {

          storedValue: SessionStorage.getItem('myValue') || '', // Retrieve value from local storage or default to an empty string

        };

      }

      handleInputChange = (event) => {

        const newValue = event.target.value;

    
    

        // Update state and store the new value in local storage

        this.setState({ storedValue: newValue });

        sessionStorage.setItem('myValue', newValue);

      };

      render() {

        return (

          <div>

            <h1>Session Storage Example</h1>

            <label>

              Type something:

              <input

                type="text"

                value={this.state.storedValue}

                onChange={this.handleInputChange}

              />

            </label>

    
    

     <p>Stored Value: {this.state.storedValue}</p>

          </div>

        );

      }

    } Output:
  • 
    
    
    
    
  • 
    

  •