[Learning record] SessionStorage and LocalStorage

SessionStorage and LocalStorage can all be used to create a local store key-value pairs to achieve parity and so on.

Core follows

Create a key-value pair

window.sessionStorage.setItem("key","value");

Get the value

var getvalue=window.sessionStorage.getItem("key");

Delete the specified key

window.sessionStorage.removeItem("key");

Clear all values

window.sessionStorage.clear();

Then the above local session is replaced with the corresponding function of localstorage

It is a simple example, users can click Create to create a record, click on the check to see if the record already exists, click Delete to delete the record, you can see when the data page is closed when sessionstorage storage is lost, but localstorage still preserved.

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>honki</title>
 6   </head>
 7   <body>
 8     <div> hello this is ss</div>
 9     <div id="whoss">who are you</div>
10     <button type="button" name="button1ss" onclick="createss()"> create </button>
11     <button type="button" name="button2ss" onclick="checkss()"> check </button>
12     <button type="button" name="button3ss" onclick="delss()"> delete </button>
13 
14     <div> hello this is lo</div>
15     <div id="wholo">who are you</div>
16     <button type="button" name="button1lo" onclick="createlo()"> create </button>
17     <button type="button" name="button2lo" onclick="checklo()"> check </button>
18     <button type="button" name="button3lo" onclick="dello()"> delete </button>
19     <!-- built files will be auto injected -->
20   </body>
21   <script type="text/javascript">
22   function createss(event){
23     window.sessionStorage.removeItem('id');
24     window.sessionStorage.setItem('id',"wang");
25     document.getElementById('whoss').innerHTML='you are wang';
26   }
27 
28   function checkss(event){
29     if (window.sessionStorage.getItem('id')==='wang')
30     {
31       document.getElementById('whoss').innerHTML='you are wang';
32     }
33     else
34     {
35       document.getElementById('whoss').innerHTML='sorry please create';
36     }
37   }
38 
39   function delss(event){
40     window.sessionStorage.clear();
41     document.getElementById('whoss').innerHTML='who are you';
42   }
43 
44   function createlo(event){
45     window.localStorage.removeItem('id');
46     window.localStorage.setItem('id',"wang");
47     document.getElementById('wholo').innerHTML='you are wang';
48   }
49 
50   function checklo(event){
51     if (window.localStorage.getItem('id')==='wang')
52     {
53       document.getElementById('wholo').innerHTML='you are wang';
54     }
55     else
56     {
57       document.getElementById('wholo').innerHTML='sorry please create';
58     }
59   }
60 
61   function dello(event){
62     window.localStorage.clear();
63     document.getElementById('wholo').innerHTML='who are you';
64   }
65   </script>
66 </html>

[Learning record] SessionStorage and LocalStorage

Guess you like