localStorage和sessionStorage和cookies

window 浏览器对象有的东西
如果想在浏览器中存储数据，永久存储，关闭页面数据就没了（临时存储），设定一个时间，到时候就过期

如果想在浏览器中存储数据

永久存储：localStorage   不登录加购物车，没登录 搜索过的商品

关闭页面数据就没了(临时存储)：sessionStorage

设定一个时间，到时候就过期：cookie

localStorage

<template>
  <div id="app">
    <h1>localStorage操作</h1>
    <button @click="saveStorage">点我向localStorage放数据</button>
    <button @click="getStorage">点我获取localStorage数据</button>
    <button @click="removeStorage">点我删除localStorage放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      localStorage.setItem('userinfo', JSON.stringify(person))
    },
    getStorage() {
      let userinfo = localStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeStorage() {
      // localStorage.clear()
      localStorage.removeItem('userinfo')
    },
}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

sessionStorage

<template>
  <div id="app">
    <h1>sessionStorage操作</h1>
    <button @click="saveSessionStorage">点我向localStorage放数据</button>
    <button @click="getSessionStorage">点我获取localStorage数据</button>
    <button @click="removeSessionStorage">点我删除localStorage放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveSessionStorage() {
      var person = {
        name: '彭于晏',
        age: 38
      }
      sessionStorage.setItem('userinfo', JSON.stringify(person))
    },
    getSessionStorage() {
      let userinfo = sessionStorage.getItem('userinfo')
      console.log(userinfo)
      console.log(typeof userinfo)
    },
    removeSessionStorage() {
      // localStorage.clear()
      sessionStorage.removeItem('userinfo')
    },
}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>

cookies

npm install vue-cookies

<template>
  <div id="app">
    <h1>cookie操作</h1>
    <button @click="saveCookie">点我向cookie放数据</button>
    <button @click="getCookie">点我获取cookie数据</button>
    <button @click="removeCookie">点我删除cookie放数据</button>
  </div>
</template>


<script>
import cookies from 'vue-cookies'

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {
    saveCookie() {
      cookies.set('name','zxr','7d')  // 按秒计
    },
    getCookie() {
      console.log(cookies.get('name'))
    },
    removeCookie() {

      cookies.remove('name')
    }
  }


}
</script>

<style scoped>
h1 {
  background-color: aqua;
}
</style>