当前位置：网站首页>Web APLS phase - Section 14 - local storage

Web APLS phase - Section 14 - local storage

2022-06-27 20:01:00 【123come on ^o^】

List of articles

Learning goals
1. The local store
- Local storage features
2. window.sessionStorage
3. window.localStorage
3 Case study ： Remember the user name
- case analysis

Learning goals

Be able to write sessionStorage Data storage and acquisition
Be able to write localStorage Data storage and acquisition
Be able to tell the difference between them

1. The local store

With the rapid development of Internet , Web based applications are becoming more and more popular , And it's getting more and more complicated , In order to meet all kinds of needs , A large amount of data will be stored locally frequently ,HTML5 The specification puts forward relevant solutions .

Local storage features

1、 The data is stored in User browser in
2、 Set up 、 Easy to read 、 Even page refresh does not lose data
3、 Large capacity ,sessionStorage about 5M、localStorage about 20M
4、 Only strings can be stored , You can put objects JSON.stringify() Store after encoding

2. window.sessionStorage

1、 The life cycle is Close the browser window
2、 In the same window ( page ) Next, data can be shared
3. In the form of key value pairs Storage use

Store the data ：

sessionStorage.setItem(key, value)

get data ：

sessionStorage.getItem(key)

Delete data ：

sessionStorage.removeItem(key)

Delete all data ：

sessionStorage.clear()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button class="set"> Store the data </button>
    <button class="get"> get data </button>
    <button class="remove"> Delete data </button>
    <button class="del"> Delete all data </button>
    <script> //1. Get elements  var ipt=document.querySelector('Input'); var set=document.querySelector('.set'); var get=document.querySelector('.get'); var remove=document.querySelector('.remove'); var del = document.querySelector('.del'); set.addEventListener('click',function(){
       // When we click , You can store the values in the form  var val=ipt.value; sessionStorage.setItem('uname',val); sessionStorage.setItem('pwd',val); }) get.addEventListener('click',function(){
       // When we click , You can get the values in the form  console.log(sessionStorage.getItem('uname')); }) remove.addEventListener('click',function(){
       // When we click , You can delete the values in the form  sessionStorage.removeItem('uname'); }) del.addEventListener('click', function() {
       //  When we click , Clear away all  sessionStorage.clear(); }); </script>
</body>
</html>

Running results ：
Insert picture description here

3. window.localStorage

The declaration cycle is permanent , Unless you delete , Otherwise, closing the page will also exist
You can have multiple windows （ page ） share （ The same browser can share ）
Store and use in the form of key value pairs

Store the data ：

localStorage.setItem(key, value)

get data ：

localStorage.getItem(key)

Delete data ：

localStorage.removeItem(key)

Delete all data ：

localStorage.clear()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button class="set"> Store the data </button>
    <button class="get"> get data </button>
    <button class="remove"> Delete data </button>
    <button class="del"> Clear all data </button>
    <script> var ipt = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var del = document.querySelector('.del'); set.addEventListener('click', function() {
       var val = ipt.value; localStorage.setItem('username', val); }) get.addEventListener('click', function() {
       console.log(localStorage.getItem('username')); }) remove.addEventListener('click', function() {
       localStorage.removeItem('username'); }) del.addEventListener('click', function() {
       localStorage.clear(); }) </script>
</body>

</html>

Running results ：
Insert picture description here

3 Case study ： Remember the user name

If you check remember user name , Next time the user opens the browser , The last login user name will be displayed automatically in the text box

case analysis

Save the data , Use local storage
Close page , You can also display the user name , So we use localStorage
Open the page , First determine whether there is this user name , If there is , Just show the user name in the form , And check the box
When the check box changes change event
If you check the , Just store , Otherwise remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="username">
    <input type="checkbox" name="" id="remember"> Remember the user name 
    <script> var username=document.querySelector('#username'); var remember=document.querySelector('#remember'); if(localStorage.getItem('username')){
       username.value=localStorage.getItem('username'); remember.checked=true; } remember.addEventListener('change',function(){
       if(this.checked){
       localStorage.setItem('username',username.value) }else{
       localStorage.removeItem('username'); } }) </script>
</body>
</html>