存储小知识点

h5中新增的离线存储（webStorage）

1. 本地存储 localStorage
2. 会话存储 sessionStorage

localStorage 和sessionStorage 的联系：
　　大小都是5M左右 存储形式：都必须以字符串形式存储，语法相同
localStorage 和sessionStorage 的区别：
　　localStorage关闭浏览器还存在；sessionStorage关闭浏览器即消失
　　setItem(‘a’,‘b’) getItem(‘a’,‘b’)
localStorage 和sessionStorage 以及cookie的区别：

本地模拟增删查

<script>
    new Vue({
        el: '#app',
        data: {
            userInfo: {
                name: '',
                age: '',
                phone: '',
                message: '',
            },
            infoList: localStorage.getItem('arr') ? JSON.parse(localStorage.getItem('arr')) : []
        },
        methods: {
            add() {
                this.infoList.push(this.userInfo);
                this.reset();
                //更新后的数组存储到本地存储中，必须以字符串形式存储
                //对对象进行字符串转化
                localStorage.setItem('arr', JSON.stringify(this.infoList))
            },
            reset() {
                this.userInfo = {
                    name: '',
                    age: '',
                    phone: '',
                    message: '',
                }
            },
            del(i) {
                this.infoList.splice(i, 1);
                localStorage.setItem('arr', JSON.stringify(this.infoList))
            }
        },
    })
</script>