【browser】浏览器环境

浏览器环境

cookie

定义：cookie 是服务器发送到用户浏览器并存储在本地的一小段文本，它会在浏览器下次访问时被携带并发送给服务器（在 http 请求头中）。cookie 可以用来存储用户的登录状态，购物车数据，网站的自定义设置等信息。

1. 存储方式：本地
2. 大小限制：4kb
3. 有效时间：默认浏览器关闭即失效，可以设置过期时间

webStorage

定义：webStorage 是 HTML5 中新增的一种存储方式，它允许浏览器将数据存储在本地，以便在不同的页面之间共享数据。且每个存储都是挂载在对应的空间当中，彼此独立去管理对应的数据，不会造成串数据和错数据的一些困扰

1. 存储方式

   • sessionStorage
   • localStorage

     以上两种存储方式均不会发送给服务器，仅在本地保存

2. 大小限制

   • sessionStorage：最大5M
   • localStorage：最大5M

3. 有效时间

   • sessionStorage：浏览器会将数据存储在本地，直到用户关闭浏览器或窗口。
   • localStorage：浏览器会将数据存储在本地，除非手动清楚缓存，否则数据不会消失。

4. 命名规范

   同源的两个项目，他们的 localStorage 和 sessionStorage 是互通的，两个项目都需要存储同一个 key 值时，会造成两个项目的 key 互相顶替，推荐以下命名规则：

   1. appKey_key
   2. 项目名_key
   3. 组织编码_key

   localStorage.setItem("A1007_theme", "xxx")
   localStorage.setItem("DSC_theme", "xxx")
   localStorage.setItem("shindata_DSC_theme", "xxx")
   

同源策略

定义：同源策略是一种约定，是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行

限制的方面：

1. 当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB
2. 当前域下的 js 脚本不能够访问其他域下的 DOM
3. 当前域下 ajax 无法发送跨域请求

同源策略的限制：

1. 协议相同
2. 域名相同
3. 端口相同

不受同源策略的限制：

1. 页面中的链接、重定向以及表单提交（action）
2. 跨域资源的引入，比如：script、img、link等

跨域

定义：跨域是指浏览器不能执行非同源策略下的脚本。

解决方案：相关文档

• 前端方案
  • 代码层面
    1. jsonp
    2. document.domain + iframe
    3. location.hash + iframe
    4. window.name + iframe
    5. postMessage
  • 协议方式
    1. websocket协议
  • 代理-抓包方式
    1. switchyOmega + whistle（针对开发环境）
• 后端方案
  • 跨域资源共享（CORS）
• 代理方案
  • Nginx代理
  • nodejs中间件代理

XMLHttpRequest、Ajax、axios、fetch

XMLHttpRequest

XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

XMLHttpRequest 对象是名为 Ajax 的 Web 应用程序架构的一项关键功能，XMLHttpRequest 对象用于在后台与服务器交换数据，所有现代的浏览器都支持 XMLHttpRequest 对象

// 创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest){
    // IE7+,Firefox，Chrome，Opera,Safari 执行
    xhr = new XMLHttpRequest();
}else{
    // IE6,IE5 执行
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// GET 请求
xhr.open("GET","url",true);
xhr.send();

// POST 请求
xhr.open("POST","url",true);
xhr.send();

//如果需要传参，则需要使用setRequestHeader() 来添加HTTP 头部
xhr.open("POST","url",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=tome&age=24");

// 通过 onreadystatechange  事件来监听状态变化，并获取服务器响应
xhr.onreadystatechange = function(){
    //请求成功时
    if(xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
    }
}

Ajax

Ajax 是对 Asynchronous JavaScript + XML（异步JavaScript和XML）的简写，其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。这一技术能够向服务器请求额外的数据而无需卸载页面，会带来很好的用户体验。Ajax技术的核心是XMLHttpRequest（简称XHR）对象，XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器府区区获取更多信息而不必刷新页面。

其主要作用如下：

• 分析和操纵服务器响应
• 监控请求过程
• 提交表单或者上传二进制文件
• 创建异步或同步请求

axios

是一个第三方库，可以用在浏览器和 node.js 中发起网络请求。本质也是对XMLHttpRequest和http的封装，只不过它是 Promise 的实现版本。

fetch

是ES6 新增的用于网络请求的标准API，核心是使用了 promise 对象

fetch(url)
.then(res => res.json())
.then(data => {
  console.info(data)
}).catch(err => {
  console.error(err)
})