LocalStorage与SessionStorage

数据的存储有两个方式

1. 存储在数据库

2. 存储于本地 (一般作用于:历史记录,搜索记录,定位信息,配置信息)

webStorage中分为

1. sessionStorage

2. loaclStorage

3. Cookie

sessionStorage与loaclStorage中含有的方法有

1. getItem(key) 获取本地存储值

2. setItem(key,value) 存储本地值

3. removeItem(key) 根据key值删除 key value

    

    

sessionStorage

        let btn =document.getElementsByTagName("button")
        let inp =document.querySelector("input")
​
        btn[0].onclick=function(){
            sessionStorage.setItem("text",inp.value)
        }
        btn[1].onclick=function(){
            console.log(sessionStorage.getItem("text"))
        }
        btn[2].onclick=function(){
            sessionStorage.removeItem("text")
        }

loaclStorage

        let btn =document.getElementsByTagName("button")
        let inp =document.querySelector("input")
​
        btn[0].onclick=function(){
            localStorage.setItem("text",inp.value)
        }
        btn[1].onclick=function(){
            console.log(localStorage.getItem("text"))
        }
        btn[2].onclick=function(){
            localStorage.removeItem("text")
        }

特点: 存储大小为5MB,在客户端中完成,并不会发送http请求至服务器

实例:存储本地值

hc:

    <div id='app'>
        <div>
            {{user.name}}-{{user.age}}
        </div>
        <button @click="changeValue">修改user值</button>
        <button @click="getFn">获取本地数据</button>
    </div>

js:

new Vue({
            el: '#app',
            data: {
                 user: {
                    name: "",
                    age: 0
                }
            },
    
            methods: {
                changeValue() {
          this.user.name = "张三"
          this.user.age = 20
          ocalStorage.setItem("username", this.user.name)
          localStorage.setItem("userage", this.user.age)
​
          //对对象进行存储,需要使用json字符串进行转译
          localStorage.setItem("user",JSON.stringify(this.user))
                },
                getFn() {
           if(localStorage.getItem("user")){
              this.user.name = localStorage.getItem("username")
              this.user.age = localStorage.getItem("userage")
               
          //对对象进行提取,需要使用json对象转译回对象形式   
          console.log(JSON.parse(localStorage.getItem("user")).name);
             }}},
    
            //钩子函数 创造期,页面创建完成时触发
            created() {
          console.log("进行了触发");
          this.user.name = localStorage.getItem("username")
          this.user.age = localStorage.getItem("userage")
                if(localStorage.getItem("user")){
          this.user=JSON.parse(localStorage.getItem("user"))
                }}})

需要注意的点:

1. 对对象进行存储,需要使用json字符串进行转译

2. 对对象进行提取,需要使用json对象转译回对象形式

3. 钩子函数 创造期,页面创建完成时触发