慕课网《前端JavaScript面试技巧》学习笔记（8）-存储与

1.请描述一下cookie，sessionStorage，和localStorage的区别
2.手动编写一个ajax，不依赖第三方库
3.跨域的几种实现方式

知识点#####

• cookie

• 本身用于客户端服务端通信，但它有本地存储的功能于是就被‘借用’，使用documen.cookie=...获取和修改

• 缺点：

  • 存储量太小，只有4kb
  • 所有http请求都带着，会影响获取资源的效率
  • API简单，需要封装才能用 ，document.cookie=...用起来麻烦

• localStorage和sessionStorage

  • HTML5专为存储设计，最大容量5M
  • API：localStorage.setItem(key,value); localStorage.getItem(key);
  • IOS Safari隐藏模式下，localStorage.getItem(key);会报错，建议同意使用try-catch封装

• XMLHttpRequest

var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
  //这里的函数异步执行
  if(xhr.readyState==4){
    if(xhr.status==200){
      alert(xhr.responseText)
    }
  }
}
xhr.send(null)

IE低版本使用ActiveXObject，和W3C标准不一样

• 状态码说明
  • readyState
    • 0-（未初始化）还没有调用send()方法
    • 1-（载入）已调用send()方法，正在发送请求
    • 2-（载入完成）send()方法执行完成，已经收到全部响应内容
    • 3-（交互）正在解析响应内容
    • 4-（完成）响应内容解析完成，可以在客户端调用了
  • status
    • 2xx-成功处理请求。如200
    • 3xx-需要重定向，浏览器直接跳转
    • 4xx-客户端请求错误，如404（地址错误）
    • 5xx-服务器端错误
• 跨域

  • 什么是跨域

    • 浏览器有同源策略，不允许ajax访问其他域接口
    • 跨域条件：协议、域名、端口，有一个不同就算跨域

  • JSONP
    加载http://coding.m.imooc.com/classindex.html，不一定服务器端真的有一个classindex.html文件，服务器可以根据请求动态生成一个文件来返回，同理于<script src='http://coding.m.imooc.com/api.js'>

  • 实现原理
    假如你的网站要跨域访问慕课网的一个接口，慕课网给你一个地址http://coding.m.imooc.com/api.js，返回内容格式如callback({x:100,y:200})（可动态生成）

    <script>
    window.callback=function(data){
      //这是我们跨域得到的信息
      console.log(data);
    }
    </script>
    <script src='http://coding.m.imooc.com/api.js'></script>
    <!-- 以上将返回callback({x:100，y:200}) -->

• 服务端设置http header
  另外一个解决跨域的简单方法，需要服务器端来做，但是作为交互方，我们必须知道这个方法，是将来解决跨域问题的一个趋势

//注意：不同后端语言的写法可能不一样
//第二个参数填写允许跨域的域名称，不建议直接写"*"
response.setHeader('Access-Control-Allow-Origin','http://a.com,http://b.com');
response.setHeader('Access-Control-Allow-Headers','X-Request-With');
response.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
//接受跨域的cookie
response.setHeader('Access-Control-Allow-Credentials','true');

• 可以跨域的三个标签：

  • <img src=''>
  • <link href=''>
  • <script src=''>

• 三个标签的场景

• <img> 用于打点统计，统计网站可能是其它域

• <link><script>可以使用CDN，CDN也是其它域

• <script>可以用于JSONP

• 跨域注意事项

  • 所有的跨域请求都必须经过信息提供方的允许
  • 如果未经允许即可获取，那就是浏览器的同源策略出现漏洞

解题#####

1.请描述一下cookie，sessionStorage，和localStorage的区别

• 容量区别，cookie为4k，localStorage和sessionStorage为5M
• cookie每次请求都会被携带在ajax中，localStorage和sessionStorage不会被携带只作为存储使用
• API易用性

2.手动编写一个ajax，不依赖第三方库

var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false)
xhr.onreadystatechange=function(){
  //这里的函数异步执行
  if(xhr.readyState==4){
    if(xhr.status==200){
      alert(xhr.responseText)
    }
  }
}
xhr.send(null)

3. 跨域的几种实现方式

• JSONP
• 服务器端设置http header