Vue.js study notes (2) - sessionStorage storage and retrieval of data

Effect picture:

Above code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>session</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style type="text/css">
            #session {
                width: 600px;
                margin: 0 auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="session">
            <input type="text" v-on:keyup.enter="addNew()" v-model="inputValue" placeholder="请输入要保存的数据"/>
            <ul>
                <li v-for="item in items">{{ item.name }}</li>
            </ul>
        </div>
        
        <script>
            var storeKey = "studentName";
            var storage = {
                fetch:function(){
                    return JSON.parse(sessionStorage.getItem(storeKey) || "[]")
                },
                save:function(items){
                    console.log("00001");
                    sessionStorage.setItem(storeKey,JSON.stringify(items));
                }
            }
            var vm =  new Vue({
                el:"#session",
                data:{
                    items:storage.fetch(),
                    inputValue:""
                },
                methods:{
                    // Add content to the array 
                    addNew: function (){
                         this .items.push({
                            name:this.inputValue
                        }),
                        this.inputValue = null
                    }
                },
                watch:{
                    // Listen for changes in 
                    items items:{
                        handler:function(items){
                            storage.save(items);
                        },
                        deep:true
                    }
                }
            })
        </script>
    </body>
</html>

Code interpretation:

　　The data object in the vue instance uses the method of reading data, but according to the life cycle of vue, the data is read first, so if the method is written into the methods object, an error will be reported, so I write the method In the storage object before the vue instance; then, enter in keyup.enter in html is an event modifier, which means that the addNew() method will be triggered when the input is completed and click enter, which is an empty array (items) Adding data, the inputValue is two-way bound, and for a higher experience, the input value is cleared after enter, which is convenient for direct input next time; after the addNew() method, although the content you entered is added to the array, these The content is not added to our sessionStorage session. In this case, our items.fetch() cannot get the value, so we need to use a monitoring function, watch.items came into being, which means monitoring the changes of items in real time, and then Add data to sessionStorage through the .save() method. When adding data, convert it into a json string type, otherwise an error will be reported, and then we can call it in the fetch() method.

Vue.js study notes (2) - sessionStorage storage and retrieval of data

Guess you like