CHIEMINCHAN'S BLOG

# 👉 数据存储和通信方式

Cookie 是服务器发送到浏览器并保存在本地的一小块数据。在第一次向服务器发送请求的时候，服务器会将 Cookie 放入响应头中，在浏览器下次访问同一服务器，再发起请求时会被携带并发送到服务器上，便于服务器进行修改或者识别。

Cookie 是不可跨域的：
每个 Cookie 都会绑定单一的域名，无法在别的域名下获取使用，一级域名和二级域名之间是允许共享使用的（domain 字段）。

关于更多详细的属性可戳我写的另一个篇文章关于 Cookie (opens new window)

# 离线存储

# localStorage

# 特点

  • 生命周期
    持久化的本地存储，除非主动手动删除数据，否则数据一直不会过期

  • 存储方法
    以键值对的方式进行存储，存取的数据都会字符串

  • 受同源策略的限制

    同源情况下，localStorage 能跨标签和跨页进行数据传输。

  • 不建议存储敏感信息，可存储普通缓存信息

# 操作方法

// 设置
localStorage.setItem("name", "chieminchan"); //存储键名为name和键值为chieminchan的数据到本地
localStorage.age = "18";

// 获取
var data = localStorage.getItem("name");
console.log(data); //chieminchan
localStorage.key(0); // 获取键名称

// 删除
localStorage.removeItem("name"); //从本地存储中移除键名为name的数据
console.log(localStorage.getItem("name")); //null

localStorage.clear(); //移除本地存储中所有数据
console.log(localStorage.getItem("name")); //null

# sessionStorage

# 特点

  • 生命周期
    用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

  • 存储方式

  • 受同浏览器窗口和同源限制
    只要这个浏览器窗口（当下浏览器的当前标签页）没有关闭，即使在同一标签页刷新页面或进入同源另一页面，数据仍然存在。

    关闭页面后，sessionStorage 会被销毁，即在新窗口新页面打开同源的另一个页面，sessionStorage 也是没有的。

# 操作方法

注意用 JSON.parse() / JSON.stringify() 做数据格式转换
localStorage / sessionStorage 可以结合 vuex, 实现数据的持久保存，解决 vuex 刷新丢失问题。

# Vue 组件通信方式

# props 和$emit

父子组件通信

# $refs / $refs、$parent / $children

# provide 和 inject

# $attrs 和 $listeners

# EvnetBus 之 $emit、$on、$off

# vuex

← 👉 移动适配方案问题总结 →