一、背景

• 今年上半年遇到项目改版需求，当时用 window.name 解决了问题，还写了一篇文章

• 后来项目上线时不时接到用户来电，反馈苹果电脑、苹果手机、苹果平板登录成功后还是会被强制弹回登录页面，一开始我还以为是个别问题，结果发现苹果系统用户反馈的越来越多，于是去调研和实际测试，发现原本存在于一个窗口生命周期的 window.name ，居然在 Safari 浏览器中只能存在于单个页面，无法实现同窗口跨页面传输小数据

二、解决方案

• ① 带在 Url 地址栏传输不安全且 low ，否决
• ② 存储在 sessionStorage 或者 localStorage ，是可以达到存储在浏览器中，但是它是在与之对应的地址网页才能拿到，经反复测试，同一域名的不同端口号都无法互相拿到数据，不满足需求，否决
• ③ 利用 window.name 传输，但是在 Mac 系统里无效，否决
• ④ cookie，cookie的中文翻译是曲奇，小甜饼的意思。cookie其实就是一些数据信息，类型为“小型文本文件”，存储于电脑上的文本文件中。而且 cookie 只和域名有关，和端口无关，刚好能满足我们的项目需求。

三、 js-cookie

• ① js-cookie是一个简单的，轻量级的处理cookies的js API。
• ② 通过npm install js-cookie安装后, 最好先要在main.js中引入import Cookies from 'js-cookie，否则可能会报错，但是我自己没引入也没报错。
• ③ 在其他的单页面组件使用js-cookie时, 每次使用都要单独引入import Cookies from 'js-cookie。
• 几种用法

Cookies.set('name', 'value') // 设置cookie值
Cookies.set('name', 'value', { expires: 7 }) // 设置过期时间 七天后过期 
Cookies.set('name', 'value', { expires: 7, path: '' }) // 设置过期时间并且只对当前路径有效 

Cookies.get('name') // 获取设置的cookie
Cookies.get() // 获取所有值
Cookies.get('name', { domain: 'sub.example.com' }) // 获某个域名底下的值，如果没有定义，默认为当前文档位置的路径的域名部分 

Cookies.remove('name') // 删除cookiee 

四、总结几种存储方式的区别

• sessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
• localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除
• 这两个 api 的共同点是：无法跨网站读取数据，同一域名不同端口都不行

• window.name：window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置
• 唯一例外就是 Mac 操作系统，无效，只能单个页面使用，无法跨页面使用

• cookie：cookie 其实就是一些数据信息，类型为小型文本文件，存储于电脑上的文本文件中
• cookie 只和域名有关，和端口无关，可同一域名下跨端口跨页面使用