页面之间的跳转与交互

前言：想写这篇的原因，学到location对象以及之前大web大作业，想实现多个页面之间的跳转只能够通过a标签来实现，但是有些地方只用a标签显然是不够的，最终还是没有解决，全都是使用a标签……现在可以通过其他方法

<div id="app">
  <p>
    <a href="B.html">链接方式跳转到B页面</a>
  </p>
  <button type="button">location.href方式跳转到其他页面</button>
</div>

下面三种结果是一样的，一般好像使用第二种……访问外部链接需要将协议填充完整才能够正常跳转

btn.addEventListener("click",function () {
  // location.assign('http://www.baidu.com');
  // location.href = 'http://www.baidu.com';
  window.location = 'http://www.baidu.com';
})

cookie

• 查看
• 设置
  不会覆盖之前的内容，会以;向后添加，只有key相同的时候才会覆盖
• 删除
  不是真的删除，将有效时间设置成前面一段时间
  
  每次客户端向服务端发送请求的时候都会携带cookie，比较消耗带宽，并且携带的参数长度有限制4kb好像
  
  
  应用场景：记住密码，自动登陆

两种浏览器存储API

不同点

1. sessionStorage
   回话存储，只在当前页面有效，关闭无效。
2. localStorage
   永久存储数据在客户端，不故意删除永久存在，
   相同点：
   页面刷新，这两种存储不受影响，还是存在的。
   方法相同
   • 设置 Storage.getItem(name)
   • 获取 Storage.setItem(name,value)
   • 清空 Storage.clear() 火狐无效
   • 删除某一个Storage.removeItem(name)

sessionStorage.clear();
sessionStorage.setItem('name','liuhu');
sessionStorage.setItem('money','0');
console.log(sessionStorage)
console.log(sessionStorage.getItem('name'));
sessionStorage.removeItem('name');

在A页面中设置内容，想在B页面得到相同的内容，应该通过localStorage 存储，相当于是一个中介仓库……是不是和vueX非常类似

应用场景：

• localStorage：购物车，常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
• sessionStorage：敏感账号一次性登录；