What is local storage? We usually save things or need to go through the database, the server, and store the data in the database, but sometimes the data we want to save does not need to be stored in the database. For example, the content we enter on the webpage, we want to refresh the page. It will not be clear data, then local storage has its value

Local storage mainly has the following characteristics:

Data is stored in the browser

Easy to read

No data loss on page refresh

can only store strings

In this article, we mainly study two ways of local storage:

window.sessionStorage
window.localStorage

( window can be omitted)

一：window.sessionStorage

Before we start explaining this method, we first explain a term - life cycle . The so-called life cycle is the process from creation to destruction. The life cycle of window.sessionStorage is to close the browser window to remove it. destroy.

Its characteristics are as follows: the life cycle is to close the browser window, only the same page can share data, and it is stored in the form of key-value pairs

The characteristics of data are nothing but additions, deletions, and changes:

sessionStorage.setItem ( key, value ): store data
sessionStorage.getItem( key ): get data
sessionStorage.removeItem( key ): delete data
sessionStorage.clear(): delete all data

sessionStorage.setItem (key, value)：

Used to store data, stored in the browser in the form of key-value pairs

<body>
     <input type="text">
     <button>存储数据</button>
     <script>
         var text=document.querySelector('input');
         var btn=document.querySelector('button');
         btn.addEventListener('click',function(){
             window.sessionStorage.setItem('id',text.value)
         })
     </script>
</body>

sessionStorage.getItem (key)：

Used to get data, here the stored value is given to the text box and it is redisplayed

<body>
     <input type="text">
     <button class="set">存储数据</button>
     <button class="get">获取数据</button>
     <script>
         var text=document.querySelector('input');
         var btnset=document.querySelector('.set');
         var btnget=document.querySelector('.get');
         btnset.addEventListener('click',function(){  //存储数据
             window.sessionStorage.setItem('id',text.value);
         })
         btnget.addEventListener('click',function(){  //获取数据
            text.value= window.sessionStorage.getItem('id');
         })
     </script>
</body>

sessionStorage.removeItem (key)：

Used to delete stored data, only one specified key of data can be deleted at a time

<body>
     <input type="text">
     <button class="set">存储数据</button>
     <button class="get">获取数据</button>
     <button class="remove">删除数据</button>
     <script>
         var text=document.querySelector('input');
         var btnset=document.querySelector('.set');
         var btnget=document.querySelector('.get');
         var btnremove=document.querySelector('.remove');
         btnset.addEventListener('click',function(){  //存储数据
             window.sessionStorage.setItem('id',text.value);
         })
         btnget.addEventListener('click',function(){  //获取数据
            text.value= window.sessionStorage.getItem('id');
         })
         btnremove.addEventListener('click',function(){  //获取数据
            window.sessionStorage.removeItem('id');
         })
     </script>
</body>

After storage, the data is stored in the browser:

After deletion, the data is completely deleted and cannot be obtained again:

sessionStorage.clear ()：

clear all data

<body>
     <input type="text">
     <button class="set">存储数据</button>
     <button class="get">获取数据</button>
     <button class="remove">删除数据</button>
     <button class="clear">删除所有数据</button>
     <script>
         var text=document.querySelector('input');
         var btnset=document.querySelector('.set');
         var btnget=document.querySelector('.get');
         var btnremove=document.querySelector('.remove');
         var btnclear=document.querySelector('.clear');
         btnset.addEventListener('click',function(){  //存储数据
             window.sessionStorage.setItem('id',text.value);
             window.sessionStorage.setItem('pwd',text.value);
         })
         btnget.addEventListener('click',function(){  //获取数据
            text.value= window.sessionStorage.getItem('id');
         })
         btnremove.addEventListener('click',function(){  //获取数据
            window.sessionStorage.removeItem('id');
         })
         btnclear.addEventListener('click',function(){  //获取数据
            window.sessionStorage.clear();
         })
     </script>
</body>

We first store two data:

Data disappears after deleting all data:

二：window.localStorage

Its characteristics are as follows: the life cycle is permanent, and it will exist even when the browser is closed, unless it is manually deleted, data can be shared among multiple pages (under the same browser), and stored in the form of key-value pairs

The characteristics of data additions, deletions, and changes are the same as sessionStorage:

localStorage.setItem( key, value ): store data
localStorage.getItem( key ): get data
localStorage.removeItem ( key ): remove data
localStorage.clear(): delete all data

localStorage.setItem (key, value)：

Store data, because its life cycle is permanent, so even if you close the browser and open it again, this data will exist
<body>
    <input type="text">
    <button>存储数据</button>
    <script>
        var text=document.querySelector('input');
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            window.localStorage.setItem('id',text.value)
        })
    </script>
</body>

localStorage.getItem (key).

Used to obtain data, the usage is the same as above

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <script>
        var text=document.querySelector('input');
        var btnset=document.querySelector('.set');
        var btnget=document.querySelector('.get');
        btnset.addEventListener('click',function(){  //存储数据
            window.localStorage.setItem('id',text.value);
        })
        btnget.addEventListener('click',function(){  //获取数据
           text.value= window.localStorage.getItem('id');
        })
    </script>
</body>

localStorage.removeItem (key)：