HTML 5

发表于   |   分类于   |     |   次阅读

这篇文章主要讲的是HTML5的一些新特性和相应的探索。

HTML5语义化

不知道大家有没有这么一个习惯，在参加面试前会先提前查看相应公司的网站，如果他们家连官网都没有，那建议就不要去了。要么是太垃圾了，要么是这家公司非常需要你的帮助。

打开网站首页，我会迫不及待的F12查看页面元素。如果当我看了所有的文本元素除了div还是div的话，我理所当然的认为逼格太TM low了，我不管你是不是markdown生成与否，首先这个网站的首页就能体现出公司的前端水平。

新时代的HTML页面应该有nav，section，article等等新出现的标签，之所以会有这些标签，是因为他们都非常的语义化，不仅工程师能快速阅读，也更有利于SEO。如果你还需要考虑到神奇的IE，那就需要加上一个html5.shiv.js.

HTML5存储

由于HTML4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的限制较多，比如cookie最多只能有4k，每个网站只能存放30或者50个cookie，但是随着网站的复杂性升级，HTML5存储是大势所趋。HTML5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS更有效率

先说说cookie的一些用法吧

1
2
3
4
5
6
7
8
9
10
// 设置cookie
$.cookie("example", "foo"); // Sample 1
$.cookie("example", "foo", { expires: 7 }); // Sample 2
$.cookie("example", "foo", { path: '/admin', expires: 7 }); // Sample 3
$.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));
// 获取cookie
$.cookie("example");
$("#ArticlesHolder").data(JSON.parse($.cookie("basket-data")));
// 删除cookie
$.removeCookie("example");

cookie普及的程度也是蛮高的，要完全的停用也是需要一段时间的。毕竟每一项技术都有它存在的理由吧，你可以在这里继续研究

永久性的本地存储（localStorage）

localStorage是HTML5本地存储的API，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该API支持情况有所差异，如使用方法、最大存储空间等。它可以长期存储数据，没有时间限制。
首先可以先检测一下浏览器的支持情况。

1
2
3
4
5
if(!!window.localStorage){
    console.log("bingo");
}else{
    console.log("您的浏览器不支持localStorage特性，请更新您的浏览器!");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var jsonObj = {"id": 123, "name": "darcy", "attr": "hello"};
function setJson(){
    localStorage.setItem("json", JSON.stringify(jsonObj));
}
function getJson(){
    var v = JSON.parse(localStorage.getItem("json"));
    console.log(v);
}
function listAllData(){
    var list = [];
    for (var i=0; i<localStorage.length; i++ ){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);

        list.push({"key":key, "value":value});
    }
    return list;
};
showData();
function showData(){
    var data = listAllData();
    var html = "";
    for (var i=0; i<data.length; i++){
        html += data[i].key + "=" + data[i].value + "<button onclick=\"del('"+ data[i].key +"')\">删除</button><br />";
    }
    document.querySelector("#div").innerHTML = html;
};
function del(key){
    localStorage.removeItem(key);
    showData();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var src = "Just-for-fun/images/tgl_check.png";
function cacheExternalImage(url){
    var img = new Image,
    src = url,
    cvs = document.createElement('canvas'),
    ctx = cvs.getContext('2d');
    img.crossOrigin = "Anonymous";
    img.onload = function() {
      //ctx.drawImage( img, 0, 0 );
    }
    img.src = src;
    if ( img.complete || img.complete === undefined ) {
        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        img.src = src;
    }
    return img;
}

function set(key){
    var img = document.createElement("img");
    // img.crossOrigin = "Anonymous";
    img.addEventListener("load", function(){
        var imgCanvas = document.createElement("canvas"),
            imgContext = imgCanvas.getContext("2d");
        imgCanvas.width = this.width;
        imgCanvas.height = this.height;
        
        imgContext.drawImage(this, 0, 0, this.width, this.height);

        var imgAsDataURL = imgCanvas.toDataURL("image/png");

        try{
            localStorage.setItem(key, imgAsDataURL);
        }catch(e){
            console.log("Storage failed: " + e)
        }

    }, false);
    img.src = src;
    img.crossOrigin = "Anonymous";
}
function get(key){
    var srcStr = localStorage.getItem(key);
    var imgObj = document.createElement('img');

    imgObj.src = srcStr;
    document.body.appendChild(imgObj);
}

会话级别的本地存储（sessionStorage）

使用注意事项

  1. 不要存放敏感信息。
  2. 选择合适的域存放合适的信息，比如一次过期的信息就放在sessionstorage中。
  3. 对存放在其中的信息最好能够在服务端进行加密。

参考资料
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
http://www.douban.com/note/510331750/