@fengfeng 2015-04-25T16:36:14.000000Z 字数 3139 阅读 2033

浏览器

未分类

浏览器的本地存储

兼容性好，基本上所有浏览器都适用
容量小，约4kb
占用http请求头，每次请求都上传

IE userdata

IE独有,在win2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的
被杀毒软件删除本地存储文件后，会出现一些异常问题
code

(function(window, document) {
  "use strict";
  var userData, attr, attributes;
  if (!window.localStorage && (userData = document.body) && userData.addBehavior) {
    if (userData.addBehavior("#default#userdata")) {
      userData.load((attr = "localStorage"));
      attributes = userData.XMLDocument.documentElement.attributes;
      window.localStorage = {
        "length" : attributes.length, 
        "key" : function(idx) { return (idx >= this.length) ? null : attributes[idx].name; }, 
        "getItem" : function(key) { return userData.getAttribute(key); }, 
        "setItem" : function(key, value) {
          userData.setAttribute(key, value);
          userData.save(attr);
          this.length += ((userData.getAttribute(key) === null) ? 1 : 0);
        }, 
        "removeItem" : function(key) {
          if (userData.getAttribute(key) !== null) {
            userData.removeAttribute(key);
            userData.save(attr);
            this.length = Math.max(0, this.length - 1);
          }
        }, 
        "clear" : function() {
          while (this.length) { userData.removeAttribute(attributes[--this.length].name); }
          userData.save(attr);
        }
      };
    }
  }
})(this, this.document);

Flash SharedObject

容量适中，基本上不存在兼容性问题
缺点是浏览器要安装flash，同时要在页面中引入特定的swf和js文件，增加额外负担

Local Storage/Session storage

容量大、易用、强大、原生支持
兼容性差些（chrome, safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）

web SQL/IndexedDB

html5新增，只有部分浏览器支持

application cache

离线应用存储，整个url对应的资源进行存储
使用过程也有很多坑

浏览器协议

浏览器本身支持，与获取文档相关的协议
- http:/https:
- ftp:
- file:
- ...
第三方应用或插件支持的协议
- mailto:
- tel:
- sms:
- ...

<a href="mailto:someone@example.com?subject=This%20is%20the%20subject&cc=someone_else@example.com&body=This%20is%20the%20body">Send email</a>
<a href="tel:+468123456">Call</a>
<a href="sms:+15105550101?body=hello，你好，我是宋史超"> 带中文 </a>

伪协议
是浏览器内部保留协议用于方便访问浏览器的脚本解析引擎和某些内部功能
- javascript:
  javascript:协议允许后面执行javascript代码，并且继承了调用的当前域。有些情况会对后面的内容处理两次，如果代码正确的话，会把后面的代码当成html解析，覆盖掉原来的html代码,所以很多javascript:void+ 一段代码：
```
<iframe src='javascript:"hello"'> </iframe>
```
- data：
  该协议会创建一个短小的内置式文档，
例子
```

data:text/html, <html contenteditable>

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD...">
```
- about:blank
  about:blank这个URL可以用来被创建DOM对象，例如：
```
<iframe src="about:blank" name="test"></iframe>
<script> 
frames["test"].document.body.innerHTML = "<h1>Hi!</h1>";
</script>
```
在浏览器中，创建一个about:blank页面，它继承的域为创建它的页面的域。例如，点击一个链接，提交一个表单，创建一个新窗口，但是当用户手动输入about:或者书签中打开的话，他的域是一个特殊的域，任何其他的页面都不可以访问。
- view-scource:
  查看源代码协议

同源策略(Same Origin policy，SOP），

浏览器通过隔离来自不同源的文件之间的访问来提供各种安全保障。
同源策略一开始是为了管理DOM之间的访问，后来逐渐扩展到Javascript对象，但并非是全部。例如非同源的脚本之间可以调用location.assign()和location.replace()。

什么是源

把协议-域名-端口三元素组合在一起组成“源(Origin)",不满足这一条件的被成为跨域。

原始资源	要访问的资源	非IE浏览器	IE浏览器
http://example.com/a/	http://example.com/b/	可以访问	可以访问
http://example.com/	http://www.example.com/	主机不匹配	主机不匹配
http://example.com/a/	https://example.com/a/	协议不匹配	协议不匹配
http://example.com:81/	http://example.com/	端口不匹配	可以访问

同源策略的影响

cookie
XMLHttpRequest
iframe
localstorage

跨域解决方案

同源策略在提高了安全性，但同时也降低了灵活性。

例如很难将login.example.com与payments.example.com两个域之间的数据可以方便的传送

当协议和端口号相同，两个域名具有相同的父域名时，采用document.domain= 公共的父域名
服务器端代理
JSONP
html5的postMessage + onmessage
XHR2的跨源资源共享（CORS）
CORS机制为跨域的ajax请求提供了可能，需要被跨域请求的服务器设置
Access-Control-Allow-Origin:被跨域的源，例如

http响应头：
HTTP/1.1 200 OK
Access-Control-Allow-Origin:http://another-domain.com