NiYingfeng 的博客

var foo = function(){return 1+1;};
//等价于
let foo = () => 1+1;

var foo = function(a, b){
    if (a !== undefined && b !== undefined) {
        return a + b
    } else {
        return 0
    }
};
//等价于
var add = (a, b) => {
    if (a !== undefined && b !== undefined) {
        return a + b
    } else {
        return 0
    }
}

var a = 1;
{
  let a = 2;
  console.log(a); //2
}
console.log(a); //1

var value = [1, 2, 3, 4, 5];
var [el1, el2, el3] = value;

var value = [1, 2, [3, 4, 5]];
var [el1, el2, [el3, el4]] = value;

var person = {firstName: "John", lastName: "Doe"};
var {firstName, lastName} = person;

function findUser(userId, {includeProfile, includeHistory}) {
    if (includeProfile) ...
    if (includeHistory) ...
}

var worker = {
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};

function findClosestShape( x=0, y=0 ){
    // ...
}

function format( pattern, ...params ){
    // return params;
}
console.log( formart( 'a', 'b', 'c' ) );

class Person {
    constructor( nane ){
        this.name = name;
    }
    describe(){
        return "Person called" + this.name;
    }
}
// 子类
class Employee extends Person{
    constructor ( name, title ){
        // super.constructor( name )
        super( name );
        this.title = title; 
    }
    describe(){
        // super.describe()
        return super() + "(" + this.title + ")";
    }
}

let arr = [ -1, 7, 2 ];
let highest = Math.max( ...arr ); // 7
new Date( ...[ 2011, 11, 24 ] );
// 非破坏性的链接单个元素
let arr2 = [ ...arr, 9, -6 ]; // [ -1, 7, 2, 9, -6 ]

let arr = [ 'foo', 'bar', 'baz' ];
for( let element of arr ){
    console.log( element );
}
// foo
// bar
// baz
for( let [ index, element ] of arr.entries() ){
    console.log( index + "." + element );
}
// foo
// bar
// baz

// lib.js
export const sqet = Math.sqrt;
export function square( x ){
    return x * x ;
}
export function diag( x, y ){
    return sqrt( square(x) + square( y ) );
}


// main.js
import { square, diag } from 'lib';
console.log( square( 11 ) ); // 121
console.log( diag( 4, 3 ) ); // 5

let str = String.raw`This is a text 
with multiple lines.
 Escapes are not interpreted,
 \n is not a newline.`

var parts = '/2012/10/Page.html'.match(XRegExp.rx`
        ^ # match at start of string only
        / (?<year> [^/]+ ) # capture top dir name as year
        / (?<month> [^/]+ ) # capture subdir name as month
        / (?<title> [^/]+ ) # capture base name as title
        \.html? $ # .htm or .html file ext at end of path
    `);
console.log( parts.year ); // 2012

<meta name="keywords" content="站点关键词" />

<meta name="description" content="站点描述" />

<meta name="robots" content="index,follow" />
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
 -->

<meta http-equiv="refresh" content="0;url=http://www.baidu.com" />

<meta name="viewport" content="width=device-width, initial-scale=0,maximum-scale=0, user-scalable=no"/>

<meta content="telephone=no" name="format-detection" />

<meta content="email=no" name="format-detection" />

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">


<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

<meta charset='utf-8' />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Cache-Control" content="no-siteapp" />

border: .5px solid #000;

.item:after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: red;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
}

-webkit-transform: scale(5);
transform: scale(5);

.border{
    border-width: 1px;
    border-image: url(border.gif) 2 repeat;
}

.item {
    /* 模拟此效果：
    border: 1px solid rgba(0, 0, 0, .15);
    */
    box-shadow: 0 -1px 1px -1px rgba(0, 0, 0, .5),
                -1px 0 1px -1px rgba(0, 0, 0, .5),
                1px 0 1px -1px rgba(0, 0, 0, .5),
                0 1px 1px -1px rgba(0, 0, 0, .5);
}

.item:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-image: -webkit-linear-gradient(0deg,#e0e0e0 50%,transparent 50%);
    background-image: linear-gradient(0deg,#e0e0e0 50%,transparent 50%);
}

<meta name="viewport" content="initial-scale=5, maximum-scale=5, minimum-scale=5, user-scalable=no">

$ git init ([project-name]) 
# 在当前目录新建一个Git代码库(新建一个目录，将其初始化为Git代码库) 

$ git clone [url]
# 下载一个项目和它的整个代码历史

$ git config –list
# 显示当前的Git配置 

$ git config -e [--global]
# 编辑Git配置文件

$ git add ./[dir]/[file1] [file2] ...   
# 添加所有文件/指定目录/指定文件到暂存区 

$ git rm [file1] [file2] ...    
# 删除工作区文件，并且将这次删除放入暂存区

$ git mv [file-original] [file-renamed] 
# 改名文件，并且将这个改名放入暂存区

$ git commit -m [message]   # 提交暂存区到仓库区 
$ git commit [file1] [file2] ... -m [message] # 提交暂存区的指定文件到仓库区 

$ git commit -a     # 提交工作区自上次commit之后的变化，直接到仓库区 
$ git commit -v     # 提交时显示所有diff信息 

$ git commit --amend -m [message] 
# 使用一次新的commit，替代上一次提交，如果代码没有任何新变化，则用来改写上一次commit的提交信息 
$ git commit --amend [file1] [file2] ...    
# 重做上一次commit，并包括指定文件的新变化

$ git branch /-r/-a 
# 列出所有本地分支/所有远程分支/所有本地分支和远程分支

$ git branch [branch-name]/[branch] [commit]
# 新建一个分支/新建一个分支 指向指定commit，但依然停留在当前分支 

$ git checkout -b [branch]  
# 新建一个分支，并切换到该分支 

$ git branch --track [branch] [remote-branch] 
# 新建一个分支，与指定的远程分支建立追踪关系 

$ git checkout [branch-name]    
# 切换到指定分支，并更新工作区 

$ git branch --set-upstream [branch] [remote-branch] 
# 建立追踪关系，在现有分支与指定的远程分支之间 

$ git merge [branch]    
# 合并指定分支到当前分支 

$ git branch -d [branch-name]   
# 删除分支 

$ git push origin --delete [branch-name]    
# 删除远程分支

$ git tag       
# 列出所有tag 
$ git tag [tag] ([commit])  
# 新建一个tag在当前commit(在指定commit) 
$ git tag -d [tag]      
# 删除本地tag 
$ git push origin :refs/tags/[tagName]   
# 删除远程tag 
$ git show [tag]            
# 查看tag信息 
$ git push [remote] [tag]    
# 提交指定tag 
$ git push [remote] --tags   
# 提交所有tag 
$ git checkout -b [branch] [tag]     
# 新建一个分支，指向某个tag

$ git status     
# 显示有变更的文件 
$ git log    
# 显示当前分支的版本历史 
$ git log --stat     
# 显示commit历史，以及每次commit发生变更的文件 
$ git log -S [keyword]   
# 搜索提交历史，根据关键词 
$ git log [tag] HEAD --pretty=format:%s 
# 显示某个commit之后的所有变动，每个commit占据一行 
$ git log [tag] HEAD --grep feature 
# 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件

$ git fetch [remote]        
# 下载远程仓库的所有变动 
$ git remote -v             
# 显示所有远程仓库 
$ git remote show [remote]  
# 显示某个远程仓库的信息 
$ git remote add [shortname] [url]
# 增加一个新的远程仓库，并命名 

$ git pull [remote] [branch]    
# 取回远程仓库的变化，并与本地分支合并 
$ git push [remote] [branch]    
# 上传本地指定分支到远程仓库 

$ git rebase    
# 从上游分支获取最新commit信息，并有机的将当前分支和上游分支进行合并

$ git checkout [file]    
# 恢复暂存区的指定文件到工作区 
$ git checkout [commit] [file] 
# 恢复某个commit的指定文件到暂存区和工作区
$ git checkout .         
# 恢复暂存区的所有文件到工作区 

$ git reset [file]   
# 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变 
$ git reset --hard   
# 重置暂存区与工作区，与上一次commit保持一致 
$ git reset [commit] 

$ git revert [commit]    
# 后者的所有变化都将被前者抵消，并且应用到当前分支

`git checkout Hotfix`

$ git checkout -b iss53

$ vim a.js 
$ git commit -a -m 'added a new footer [issue 53]'

$ git checkout master
$ git checkout -b 'hotfix'
$ vim index.html 
$ git commit -a -m 'fixed the broken email address'

$ git checkout master 
$ git merge hotfix

$ git branch -d hotfix
$ git checkout iss53 
$ vim index.html 
$ git commit -a -m 'finished the new footer [issue 53]'

$ git checkout master 
$ git merge iss53

git checkout -b myfeature develop

git checkout devleop
git merge --no-ff myfeature（--no-ff，即not fast forward，其作用是：要求git merge即使在fast forward条件下也要产生一个新的merge commit）（采用--no-ff的方式进行分支合并，其目的在于，希望保持原有“Feature branches”整个提交链的完整性）
git branch -d myfeature
git push origin develop

git checkout -b release-2 develop./bump-version.sh 2 （这个脚本用于将代码所有涉及版本信息的地方都统一修改到2，另外，需要用户根据自己的项目去编写适合的bump-version.sh）
git commit -a -m "Bumped version number to 2"

git checkout -b hotfix-1 master./bump-version.sh 1
git commit -a -m "Bumpt version to 1" （然后可以开始问题修复工作）
git commit -m "Fixed severe production problem" （在问题修复后，进行第二次提交）

git checkout mastergit merge --no-ff hotfix-1
git tag -a 1
git checkout developgit merge --no-ff hotfix-1
git branch -d hotfix-1

Cache-Control:max-age=600

Cache-Control:max-age=0

Cache-Control:no-cache

Cache-Control:max-age

```
interface Storage { 
    readonly attribute unsigned long length; 
    [IndexGetter] DOMString key(in unsigned long index); 
    [NameGetter] DOMString getItem(in DOMString key); 
    [NameSetter] void setItem(in DOMString key, in DOMString data); 
    [NameDeleter] void removeItem(in DOMString key); 
    void clear();
};

`sessionStorage` 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。

<script type="text/javascript">
 // 当页面刷新时，从sessionStorage恢复之前输入的内容
 window.onload = function(){
        if (window.sessionStorage) {
                var name = window.sessionStorage.getItem("name");
                if (name != "" || name != null){
                        document.getElementById("name").value = name;
                 }
         }
 };

 // 将数据保存到sessionStorage对象中
 function saveToStorage() {
        if (window.sessionStorage) {
                var name = document.getElementById("name").value;
                window.sessionStorage.setItem("name", name);
                window.location.href="session_storage.html";
         }
 }
 </script>

<form action="./session_storage.html">
        <input type="text" name="name" id="name"/>
        <input type="button" value="Save" onclick="saveToStorage()"/>
</form>

当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。sessionStorage 对象在处理这种情况的时候是最有用的。比如恢复我们在表单中已经填写的数据。 把上面的代码复制到 session_storage.html（也可以从附件中直接下载）页面中，用 Google Chrome 浏览器的不同 PAGE 或 WINDOW 打开，在输入框中分别输入不同的文字，再点击“Save”，然后分别刷新。每个 PAGE 或 WINDOW 显示都是当前PAGE输入的内容，互不影响。关闭 PAGE，再重新打开，上一次输入保存的内容已经没有了。 ![](http://image.freefe.cc/20160815211746.png) `Local Storage` 的接口、用法与 `Session Storage` 一样，唯一不同的是：Local Storage 保存的数据是持久性的。当前 PAGE 关闭（Page Session 结束后），保存的数据依然存在。重新打开PAGE，上次保存的数据可以获取到。另外，Local Storage 是全局性的，同时打开两个 PAGE 会共享一份存数据，在一个PAGE中修改数据，另一个 PAGE 中是可以感知到的。

<script>
    //通过localStorage直接引用key, 另一种写法，等价于：
    //localStorage.getItem("pageLoadCount");
    //localStorage.setItem("pageLoadCount", value);
    if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
         localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
         document.getElementById('count').textContent = localStorage.pageLoadCount;
</script>

<p>
        You have viewed this page
        <span id="count">an untold number of</span>
        time(s).
</p>

将上面代码复制到 local_storage.html 的页面中，用浏览器打开，pageLoadCount 的值是1；关闭 PAGE 重新打开，pageLoadCount 的值是2。这是因为第一次的值已经保存了。 ![](http://image.freefe.cc/20160815211804.png) 用两个 PAGE 同时打开 local_storage.html，并分别交替刷新，发现两个 PAGE 是共享一个 pageLoadCount 的。 ![](http://image.freefe.cc/20160815211818.png) 分析：Dom Storage 给 Web 提供了一种更录活的数据存储方式，存储空间更大（相对 Cookies)，用法也比较简单，方便存储服务器或本地的一些临时数据。 从 DomStorage 提供的接口来看，DomStorage 适合存储比较简单的数据，如果要存储结构化的数据，可能要借助 JASON了，将要存储的对象转为 JASON 字串。不太适合存储比较复杂或存储空间要求比较大的数据，也不适合存储静态的文件等。 在 Android 内嵌 Webview 中，需要通过 Webview 设置接口启用 Dom Storage。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDomStorageEnabled(true);

拿 Android 类比的话，Web 的 Dom Storage 机制类似于 Android 的 SharedPreference 机制。

### 2.3 Web SQL Database存储机制

H5 也提供基于 SQL 的数据库存储机制，用于存储适合数据库的结构化数据。根据官方的标准文档，Web SQL Database 存储机制不再推荐使用，将来也不再维护，而是推荐使用 `AppCache` 和 `IndexedDB`。 现在主流的浏览器（点击查看浏览器支持情况）都还是支持 Web SQL Database 存储机制的。Web SQL Database 存储机制提供了一组 API 供 Web App 创建、存储、查询数据库。 下面通过简单的例子，演示下 Web SQL Database 的使用。

<script>
        if(window.openDatabase){
            //打开数据库，如果没有则创建
            var db = openDatabase('mydb', '0', 'Test DB', 2 * 1024);

             //通过事务，创建一个表，并添加两条记录
            db.transaction(function (tx) {
                     tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
                     tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
                     tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
             });

            //查询表中所有记录，并展示出来
         db.transaction(function (tx) {
                 tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
                         var len = results.rows.length, i;
                         msg = "<p>Found rows: " + len + "</p>";
                         for(i=0; i<len; i++){
                                 msg += "<p>" + results.rows.item(i).log + "</p>";
                         }
                         document.querySelector('#status').innerHTML =  msg;
                         }, null);
            });
}

</script>

<div id="status" name="status">Status Message</div>

将上面代码复制到 sql_database.html 中，用浏览器打开，可看到下面的内容。 ![](http://image.freefe.cc/20160815211818.png) 官方建议浏览器在实现时，对每个 HOST 的数据库存储空间作一定限制，建议默认是 5MB（分 HOST）的配额；达到上限后，可以申请更多存储空间。另外，现在主流浏览器 SQL Database 的实现都是基于 SQLite。 分析：SQL Database 的主要优势在于能够存储结构复杂的数据，能充分利用数据库的优势，可方便对数据进行增加、删除、修改、查询。由于 SQL 语法的复杂性，使用起来麻烦一些。SQL Database 也不太适合做静态文件的缓存。 在 Android 内嵌 Webview 中，需要通过 Webview 设置接口启用 SQL Database，同时还要设置数据库文件的存储路径。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setDatabaseEnabled(true);
final String dbPath = getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
webSettings.setDatabasePath(dbPath);

Android 系统也使用了大量的数据库用来存储数据，比如联系人、短消息等；数据库的格式也 SQLite。Android 也提供了 API 来操作 SQLite。Web SQL Database 存储机制就是通过提供一组 API，借助浏览器的实现，将这种 Native 的功能提供给了 Web App。

### 2.4 Application Cache 机制

Application Cache（简称 AppCache)似乎是为支持 Web App 离线使用而开发的缓存机制。它的缓存机制类似于浏览器的缓存（Cache-Control 和 Last-Modified）机制，都是以文件为单位进行缓存，且文件有一定更新机制。但 AppCache 是对浏览器缓存机制的补充，不是替代。 先拿 W3C 官方的一个例子，说下 AppCache 机制的用法与功能。

<!DOCTYPE html>
<html manifest="demo_html.appcache">
    <body>

    <script src="demo_time.js"></script>

    <p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
    <p><img src="img_logo.gif" width="336" height="69"></p>
    <p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>

    </body>
</html>

上面 HTML 文档，引用外部一个 JS 文件和一个 GIF 图片文件，在其 HTML 头中通过 manifest 属性引用了一个 appcache 结尾的文件。 我们在 Google Chrome 浏览器中打开这个 HTML 链接，JS 功能正常，图片也显示正常。禁用网络，关闭浏览器重新打开这个链接，发现 JS 工作正常，图片也显示正常。当然也有可能是浏览缓存起的作用，我们可以在文件的浏览器缓存过期后，禁用网络再试，发现 HTML 页面也是正常的。 通过 Google Chrome 浏览器自带的工具，我们可以查看已经缓存的 AppCache（分 HOST)。 ![](http://image.freefe.cc/20160815211900.png) 上面截图中的缓存，就是我们刚才打开 HTML 的页面 AppCache。从截图中看，HTML 页面及 HTML 引用的 JS、GIF 图像文件都被缓存了；另外 HTML 头中 manifest 属性引用的 appcache 文件也缓存了。 AppCache 的原理有两个关键点：manifest 属性和 manifest 文件。 HTML 在头中通过 manifest 属性引用 manifest 文件。manifest 文件，就是上面以 appcache 结尾的文件，是一个普通文件文件，列出了需要缓存的文件。 ![](http://image.freefe.cc/20160815211928.png) 上面截图中的 manifest 文件，就 HTML 代码引用的 manifest 文件。文件比较简单，第一行是关键字，第二、三行就是要缓存的文件路径（相对路径）。这只是最简单的 manifest 文件，完整的还包括其他关键字与内容。引用 manifest 文件的 HTML 和 manifest 文件中列出的要缓存的文件最终都会被浏览器缓存。 完整的 manifest 文件，包括三个 Section，类型 Windows 中 ini 配置文件的 Section，不过不要中括号。

*   CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time
*   NETWORK - Files listed under this header require a connection to the server, and will never be cached
*   FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

完整的 manifest 文件，如：

CACHE MANIFEST
# 2012-02-21 v0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

总的来说，浏览器在首次加载 HTML 文件时，会解析 manifest 属性，并读取 manifest 文件，获取 Section：CACHE MANIFEST 下要缓存的文件列表，再对文件缓存。 AppCache 的缓存文件，与浏览器的缓存文件分开存储的，还是一份？应该是分开的。因为 AppCache 在本地也有 5MB（分 HOST）的空间限制。 AppCache 在首次加载生成后，也有更新机制。被缓存的文件如果要更新，需要更新 manifest 文件。因为浏览器在下次加载时，除了会默认使用缓存外，还会在后台检查 manifest 文件有没有修改（byte by byte)。发现有修改，就会重新获取 manifest 文件，对 Section：CACHE MANIFEST 下文件列表检查更新。manifest 文件与缓存文件的检查更新也遵守浏览器缓存机制。 如用用户手动清了 AppCache 缓存，下次加载时，浏览器会重新生成缓存，也可算是一种缓存的更新。另外， Web App 也可用代码实现缓存更新。 分析：AppCache 看起来是一种比较好的缓存方法，除了缓存静态资源文件外，也适合构建 Web 离线 App。在实际使用中有些需要注意的地方，有一些可以说是”坑“。

*   要更新缓存的文件，需要更新包含它的 manifest 文件，那怕只加一个空格。常用的方法，是修改 manifest 文件注释中的版本号。如：# 2012-02-21 v1.0.0
*   被缓存的文件，浏览器是先使用，再通过检查 manifest 文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。
*   在更新缓存过程中，如果有一个文件更新失败，则整个更新会失败。
*   manifest 和引用它的HTML要在相同 HOST。
*   manifest 文件中的文件列表，如果是相对路径，则是相对 manifest 文件的相对路径。
*   manifest 也有可能更新出错，导致缓存文件更新失败。
*   没有缓存的资源在已经缓存的 HTML 中不能加载，即使有网络。例如：http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/
*   manifest 文件本身不能被缓存，且 manifest 文件的更新使用的是浏览器缓存机制。所以 manifest 文件的 Cache-Control 缓存时间不能设置太长。

另外，根据官方文档，AppCache 已经不推荐使用了，标准也不会再支持。现在主流的浏览器都是还支持 AppCache的，以后就不太确定了。 在Android 内嵌 Webview中，需要通过 Webview 设置接口启用 AppCache，同时还要设置缓存文件的存储路径，另外还可以设置缓存的空间大小。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setAppCacheEnabled(true);
final String cachePath = getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
webSettings.setAppCachePath(cachePath);
webSettings.setAppCacheMaxSize(5*1024*1024);

### 2.5 Indexed Database

IndexedDB 也是一种数据库的存储机制，但不同于已经不再支持的 Web SQL Database。IndexedDB 不是传统的关系数据库，可归为 NoSQL 数据库。IndexedDB 又类似于 Dom Storage 的 key-value 的存储方式，但功能更强大，且存储空间更大。 IndexedDB 存储数据是 key-value 的形式。Key 是必需，且要唯一；Key 可以自己定义，也可由系统自动生成。Value 也是必需的，但 Value 非常灵活，可以是任何类型的对象。一般 Value 都是通过 Key 来存取的。 IndexedDB 提供了一组 API，可以进行数据存、取以及遍历。这些 API 都是异步的，操作的结果都是在回调中返回。 下面代码演示了 IndexedDB 中 DB 的打开（创建）、存储对象(可理解成有关系数据的”表“）的创建及数据存取、遍历基本功能。

<script type="text/javascript">
var db;
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
//浏览器是否支持IndexedDB
if (window.indexedDB) {
     //打开数据库，如果没有，则创建
     var openRequest = window.indexedDB.open("people_db", 1);
     //DB版本设置或升级时回调
     openRequest.onupgradeneeded = function(e) {
             console.log("Upgrading...");
             var thisDB = e.target.result;
             if(!thisDB.objectStoreNames.contains("people")) {
                     console.log("Create Object Store: people.");
                     //创建存储对象，类似于关系数据库的表
                     thisDB.createObjectStore("people", { autoIncrement:true });
                    //创建存储对象， 还创建索引
                    //var objectStore = thisDB.createObjectStore("people",{ autoIncrement:true });
                 // //first arg is name of index, second is the path (col);
                //objectStore.createIndex("name","name", {unique:false});
             //objectStore.createIndex("email","email", {unique:true});
         }
}

//DB成功打开回调
openRequest.onsuccess = function(e) {
        console.log("Success!");
        //保存全局的数据库对象，后面会用到
        db = e.target.result;
        //绑定按钮点击事件
        document.querySelector("#addButton").addEventListener("click", addPerson, false);

        document.querySelector("#getButton").addEventListener("click", getPerson, false);

        document.querySelector("#getAllButton").addEventListener("click", getPeople, false);

        document.querySelector("#getByName").addEventListener("click", getPeopleByNameIndex1, false);
}
    //DB打开失败回调
    openRequest.onerror = function(e) {
            console.log("Error");
            console.dir(e);
     }
}else{
        alert('Sorry! Your browser doesn\'t support the IndexedDB.');
}

//添加一条记录
function addPerson(e) {
        var name = document.querySelector("#name").value;
        var email = document.querySelector("#email").value;
        console.log("About to add "+name+"/"+email);
        var transaction = db.transaction(["people"],"readwrite");
        var store = transaction.objectStore("people");
     //Define a person
     var person = {
             name:name,
             email:email,
             created:new Date()
     }
     //Perform the add
     var request = store.add(person);
     //var request = store.put(person, 2);
     request.onerror = function(e) {
             console.log("Error",e.target.error.name);
             //some type of error handler
     }
     request.onsuccess = function(e) {
            console.log("Woot! Did it.");
     }
}
//通过KEY查询记录
function getPerson(e) {
        var key = document.querySelector("#key").value;
        if(key === "" || isNaN(key)) return;
        var transaction = db.transaction(["people"],"readonly");
        var store = transaction.objectStore("people");
        var request = store.get(Number(key));
        request.onsuccess = function(e) {
                var result = e.target.result;
                console.dir(result);
                if(result) {
                     var s = "<p><h2>Key "+key+"</h2></p>";
                     for(var field in result) {
                             s+= field+"="+result[field]+"<br/>";
                     }
                     document.querySelector("#status").innerHTML = s;
                 } else {
                        document.querySelector("#status").innerHTML = "<h2>No match!</h2>";
                 }
         }
}
//获取所有记录
function getPeople(e) {
        var s = "";
         db.transaction(["people"], "readonly").objectStore("people").openCursor().onsuccess = function(e) {
                var cursor = e.target.result;
                if(cursor) {
                        s += "<p><h2>Key "+cursor.key+"</h2></p>";
                        for(var field in cursor.value) {
                                s+= field+"="+cursor.value[field]+"<br/>";
                        }
                        s+="</p>";
                        cursor.continue();
                 }
                 document.querySelector("#status2").innerHTML = s;
         }
}
//通过索引查询记录
function getPeopleByNameIndex(e)
{
        var name = document.querySelector("#name1").value;

        var transaction = db.transaction(["people"],"readonly");
        var store = transaction.objectStore("people");
        var index = store.index("name");

        //name is some value
        var request = index.get(name);

        request.onsuccess = function(e) {
             var result = e.target.result;
             if(result) {
                     var s = "<p><h2>Name "+name+"</h2><p>";
                     for(var field in result) {
                             s+= field+"="+result[field]+"<br/>";
                     }
                     s+="</p>";
        } else {
                document.querySelector("#status3").innerHTML = "<h2>No match!</h2>";
         }
     }
}
//通过索引查询记录
function getPeopleByNameIndex1(e)
{
        var s = "";
        var name = document.querySelector("#name1").value;
        var transaction = db.transaction(["people"],"readonly");
        var store = transaction.objectStore("people");
        var index = store.index("name");
        //name is some value
        index.openCursor().onsuccess = function(e) {
                var cursor = e.target.result;
                if(cursor) {
                        s += "<p><h2>Key "+cursor.key+"</h2></p>";
                        for(var field in cursor.value) {
                                s+= field+"="+cursor.value[field]+"<br/>";
                        }
                        s+="</p>";
                        cursor.continue();
                 }
                 document.querySelector("#status3").innerHTML = s;
         }
}
</script>
<p>添加数据<br/>
<input type="text" id="name" placeholder="Name"><br/>
<input type="email" id="email" placeholder="Email"><br/>
<button id="addButton">Add Data</button>
</p>
<p>根据Key查询数据<br/>
<input type="text" id="key" placeholder="Key"><br/>
<button id="getButton">Get Data</button>
</p>
<div id="status" name="status"></div>
<p>获取所有数据<br/>
<button id="getAllButton">Get EveryOne</button>
</p>
<div id="status2" name="status2"></div>
<p>根据索引:Name查询数据<br/>
        <input type="text" id="name1" placeholder="Name"><br/>
        <button id="getByName">Get ByName</button>
</p>
<div id="status3" name="status3"></div>

将上面的代码复制到 indexed_db.html 中，用 Google Chrome 浏览器打开，就可以添加、查询数据。在 Chrome 的开发者工具中，能查看创建的 DB 、存储对象(可理解成表）以及表中添加的数据。 ![](http://image.freefe.cc/20160815211928.png) IndexedDB 有个非常强大的功能，就是 index（索引）。它可对 Value 对象中任何属性生成索引，然后可以基于索引进行 Value 对象的快速查询。 要生成索引或支持索引查询数据，需求在首次生成存储对象时，调用接口生成属性的索引。可以同时对对象的多个不同属性创建索引。如下面代码就对name 和 email 两个属性都生成了索引。

var objectStore = thisDB.createObjectStore("people",{ autoIncrement:true });
//first arg is name of index, second is the path (col);
objectStore.createIndex("name","name", {unique:false});
objectStore.createIndex("email","email", {unique:true});

生成索引后，就可以基于索引进行数据的查询。

function getPeopleByNameIndex(e){
var name = document.querySelector("#name1").value;
var transaction = db.transaction(["people"],"readonly");
var store = transaction.objectStore("people");
var index = store.index("name");
//name is some value
var request = index.get(name);
request.onsuccess = function(e) {
        var result = e.target.result;
        if(result) {
                var s = "<p><h2>Name "+name+"</h2><p>";
                for(var field in result) {
                        s+= field+"="+result[field]+"<br/>";
                }
                s+="</p>";
        } else {
                document.querySelector("#status3").innerHTML = "<h2>No match!</h2>";
        }
    }
}

分析：IndexedDB 是一种灵活且功能强大的数据存储机制，它集合了 Dom Storage 和 Web SQL Database 的优点，用于存储大块或复杂结构的数据，提供更大的存储空间，使用起来也比较简单。可以作为 Web SQL Database 的替代。不太适合静态文件的缓存。

*   以key-value 的方式存取对象，可以是任何类型值或对象，包括二进制。
*   可以对对象任何属性生成索引，方便查询。
*   较大的存储空间，默认推荐250MB(分 HOST)，比 Dom Storage 的5MB 要大的多。
*   通过数据库的事务（tranction）机制进行数据操作，保证数据一致性。
*   异步的 API 调用，避免造成等待而影响体验。

Android 在4.4开始加入对 IndexedDB 的支持，只需打开允许 JS 执行的开关就好了。

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

### 2.6 File System API

File System API 是 H5 新加入的存储机制。它为 Web App 提供了一个虚拟的文件系统，就像 Native App 访问本地文件系统一样。由于安全性的考虑，这个虚拟文件系统有一定的限制。Web App 在虚拟的文件系统中，可以进行文件（夹）的创建、读、写、删除、遍历等操作。 File System API 也是一种可选的缓存机制，和前面的 SQLDatabase、IndexedDB 和 AppCache 等一样。File System API 有自己的一些特定的优势：

*   可以满足大块的二进制数据（ large binary blobs）存储需求。
*   可以通过预加载资源文件来提高性能。
*   可以直接编辑文件。

浏览器给虚拟文件系统提供了两种类型的存储空间：临时的和持久性的。临时的存储空间是由浏览器自动分配的，但可能被浏览器回收；持久性的存储空间需要显示的申请，申请时浏览器会给用户一提示，需要用户进行确认。持久性的存储空间是 WebApp 自己管理，浏览器不会回收，也不会清除内容。持久性的存储空间大小是通过配额来管理的，首次申请时会一个初始的配额，配额用完需要再次申请。 虚拟的文件系统是运行在沙盒中。不同 WebApp 的虚拟文件系统是互相隔离的，虚拟文件系统与本地文件系统也是互相隔离的。 File System API 提供了一组文件与文件夹的操作接口，有同步和异步两个版本，可满足不同的使用场景。下面通过一个文件创建、读、写的例子，演示下简单的功能与用法。

<script type="text/javascript">
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
//请求临时文件的存储空间
if (window.requestFileSystem) {
         window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFS, errorHandler);
}else{
    alert('Sorry! Your browser doesn\'t support the FileSystem API');
}
//请求成功回调
function initFS(fs){
    //在根目录下打开log.txt文件，如果不存在就创建
    //fs就是成功返回的文件系统对象，fs.root代表根目录
    fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
    //fileEntry是返回的一个文件对象，代表打开的文件
    //向文件写入指定内容
    writeFile(fileEntry);
    //将写入的内容又读出来，显示在页面上
    readFile(fileEntry);
    }, errorHandler);
}
//读取文件内容
function readFile(fileEntry)
{
        console.log('readFile');

     // Get a File object representing the file,
     // then use FileReader to read its contents.
     fileEntry.file(function(file) {
         console.log('createReader');
            var reader = new FileReader();
            reader.onloadend = function(e) {
                console.log('onloadend');
                var txtArea = document.createElement('textarea');
                txtArea.value = this.result;
                document.body.appendChild(txtArea);
            };
            reader.readAsText(file);
     }, errorHandler);
}

//向文件写入指定内容
function writeFile(fileEntry)
{
        console.log('writeFile');
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {
            console.log('createWriter');
            fileWriter.onwriteend = function(e) {
                console.log('Write completed');
            };
                fileWriter.onerror = function(e) {
                    console.log('Write failed: ' + e.toString());
                };
                // Create a new Blob and write it to log.txt.
                var blob = new Blob(['Hello, World!'], {type: 'text/plain'});
                fileWriter.write(blob);
         }, errorHandler);
}
function errorHandler(err){
 var msg = 'An error occured: ' + err;
 console.log(msg);
};
 </script>

<div class="container">
    <span>1234</span>
    <span>1234</span>
    <span>1234</span>
    <span>1234</span>
</div>

.container span:after{
    content: ' ';
    font-size:0;
}

```
<style>
    body {
        width: 150px;
    }
    .float {
        width: 50px;
        height: 100px;
        float: left;
        background: #A3F173;
    }
    .main{
        height: 200px;
        background: #5C9E4C;
    }
</style>
<body>
    <div class="float"></div>
    <div class="main"></div>
</body>

![](http://freefe.cc/blog/wp-content/uploads/2016/06/20160630191811.png) class 为main 的div被浮动元素覆盖，如内部有文字时，将对其环绕展现，区域被浮动元素覆盖。当将其 BFC 化之后,就会展现BFC区域不会与浮动元素发生重叠的特性

.main{
    height: 200px;
    background: #5C9E4C;
    overlay： hidden;
}

![](http://freefe.cc/blog/wp-content/uploads/2016/06/20160630192105.png) _清除浮动，父级元素高度计算内部浮动元素_

<style>
    .main{
        padding: 5px;
        width: 200px;
        background: #5C9E4C;
    }
    .float {
        width: 50px;
        height: 100px;
        float: left;
        background: #A3F173;
    }
</style>
<body>
    <div class="main">
        <div class="float"></div>
    </div>
</body>

![](http://freefe.cc/blog/wp-content/uploads/2016/06/20160630193213.png) 父级元素内部元素由于其浮动属性，所以父级元素的高度并未计算浮动元素的高度，当将其 BFC化之后，则展现BFC计算高度时，会计算其内部浮动元素

.main{
    overflow：hidden;
    padding: 5px;
    width: 200px;
    background: #5C9E4C;
}

![](http://freefe.cc/blog/wp-content/uploads/2016/06/20160630193540.png) 不过上面形式带来的问题是，我们需要将父级元素设置某一属性，使其被BFC化，就很可能会有样式上的冲突问题，所以更好的解决方案为：

.main:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

_margin 重叠问题_

<style>
    .top{
        margin-bottom: 20px;
        height: 100px;
        width: 200px;
        background: #5C9E4C;
    }
    .bottom {
        margin-top: 30px;
        height: 100px;
        width: 200px;
        background: #A3F173;
    }
    .center{
        margin-top: 40px;
        height: 50px;
        background: #5C9E4C;
    }
</style>
<body>
    <div class="top"></div>
    <div class="bottom">
        <div class="center"></div>
    </div>
</body>