当前位置：网站首页>JS local storage

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 .

One 、 Local storage features

（1） The data is stored in the user's browser

（2） Easy to set and read data , And 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

Two 、sessionStorage

2.1、sessionStorage characteristic

（1） The lifecycle is to close the browser window

（2） In the same window ( page ) Next, data can be shared

（3） Store and use in the form of key value pairs

Method ：

2.2、 Store the data sessionStorage.setItem(key, value)

The code is as follows ：

    <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')
            // Store the data 
        set.addEventListener('click', function() {
            // When we click , You can store the values in the form 
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
        })
    </script>

Running results ：

2.3、 get data sessionStorage.getItem(key)

The code is as follows ：

    <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')

        // Store the data 
        set.addEventListener('click', function() {
                // When we click , You can store the values in the form 
                var val = ipt.value;
                sessionStorage.setItem('uname', val);
            })
            // get data 
        get.addEventListener('click', function() {
            //  When we click , You can get the data 
            console.log(sessionStorage.getItem('uname'));
        })
    </script>

Running results ：

2.4、 Delete a data sessionStorage.removeItem(key)

The code is as follows ：

    <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')
            // Store the data 
        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('pws', val);
            })
            // get data 
        get.addEventListener('click', function() {
            //  When we click , You can get the data 
            console.log(sessionStorage.getItem('uname'));
        })

        // Delete data 
        remove.addEventListener('click', function() {
            //  When we click , You can delete the data one by one 
            sessionStorage.removeItem('uname');
        })
    </script>

Running results ：

Store two data , Delete only one

2.5、 Delete all data sessionStorage.clear()

    <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');
        // Store the data 
        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('pws', val);
            })
            // get data 
        get.addEventListener('click', function() {
            //  When we click , You can get the data 
            console.log(sessionStorage.getItem('uname'));
        })

        // Delete a data 
        remove.addEventListener('click', function() {
            //  When we click , You can delete the data one by one 
            sessionStorage.removeItem('uname');
        })

        // Delete all data 
        del.addEventListener('click', function() {
            //  When we click , You can delete all the data 
            sessionStorage.clear();
        })
    </script>

3、 ... and 、localStorage

3.1、localStorage characteristic

（1） The declaration cycle is permanent , Unless you delete it manually, the closed page will also exist

（2） You can have multiple windows （ page ） share （ The same browser can share ）

（3） Store and use in the form of key value pairs

Method ：

3.2、 Store the data localStorage.setItem(key, value)

The code is as follows ：

    <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');
        // Store the data 
        set.addEventListener('click', function() {
                // When we click , You can store the values in the form 
                var val = ipt.value;
                localStorage.setItem('uname', val);
            })
     </script>

Running results ;

3.3、 get data localStorage.getItem(key)

    <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');
        // Store the data 
        set.addEventListener('click', function() {
            // When we click , You can store the values in the form 
            var val = ipt.value;
            localStorage.setItem('uname', val);
        })

        // get data 
        get.addEventListener('click', function() {
            //  When we click , You can get the data 
            console.log(localStorage.getItem('uname'));
        })
    </script>

3.4、 Delete a data localStorage.removeItem(key)

   <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');
        // Store the data 
        set.addEventListener('click', function() {
            // When we click , You can store the values in the form 
            var val = ipt.value;
            localStorage.setItem('uname', val);
        })

        // get data 
        get.addEventListener('click', function() {
            //  When we click , You can get the data 
            console.log(localStorage.getItem('uname'));
        })

        // Delete a data 
        remove.addEventListener('click', function() {
            //  When we click , You can delete the data one by one 
            localStorage.removeItem('uname');
        })
    </script>

3.5、 Delete all data localStorage.clear()

   <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');
        // Store the data 
        set.addEventListener('click', function() {
            // When we click , You can store the values in the form 
            var val = ipt.value;
            localStorage.setItem('uname', val);
        })

        // get data 
        get.addEventListener('click', function() {
            //  When we click , You can get the data 
            console.log(localStorage.getItem('uname'));
        })

        // Delete a data 
        remove.addEventListener('click', function() {
            //  When we click , You can delete the data one by one 
            localStorage.removeItem('uname');
        })

        // Delete all data 
        del.addEventListener('click', function() {
            //  When we click , You can delete all the data 
            localStorage.clear();
        })
    </script>

Four 、 Remember the user name

demand ：

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

case analysis ：

（1） Store the data , Use local storage ;

（2） Close page , You can also display the user name , So we use localStorage;

（3） Open the page , First determine whether there is this user name , If yes, the user name will be displayed in the form , And check the box ;

（4） When the check box changes change event ;

（5） If you check the , Just store , Otherwise remove .

Code ：


    <input type="text" id="username">
    <input type="checkbox" id="remeber"> Remember the user name 
    <script>
        var username = document.querySelector('#username');
        var remeber = document.querySelector('#remeber');

        // Judge if there is any data 
        if (localStorage.getItem('username')) {
            //  Take if there is 
            username.value = localStorage.getItem('username');
            //  Also check the checkbox 
            remeber.checked = true;
        }

        remeber.addEventListener('change', function() {

            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>

Running results ;