HTML5网页中SVG和Canvas以及IMG图片的转换方法(2)_H5之家

3.写一个<Form>, 注意：
将其属性target指向IFrame的名称，这样提交后返回的目标页面就会在IFrame中，而不被看见。
将提交按钮改为一般的Button ：<INPUT type="button" onclick="func()">

4.为以上类添加一个函数sendFileRequest（），参数放入Form的名称和回调函数的指针，这样就可以像表单中在提交前添加一些需要的变量，并且提交；

5.这里注意一点，如果表单<Form>中不包含<Input type="file">这样的元素的话，表单内容完全可以自动生成，例如可以通过函数sendFileRequest（）进行构建,或在嵌入的页中进行构建，然后把表单的各种值以Key=Value数组的形式传入，借此可以封装成一个函数：
var form=document.createElement("Form");
...
但如果包含<Input type="file">的话，文件上传时该tag的属性value是文件的名称，而此属性是只读的不能被赋值：
var fileInput=document.createElement("Input");
fileInput.type="file";
fileInput.name="myName"
fileInput.value="myfile.txt" //此句会出错
这是由于安全的原因，<Input type="file">不能被赋值；
这样，表单必须做正常形式，target指向IFrame的name。

6.在以上的那个类中，再添加一个函数作为回调函数getResponse(msg):
getResponse:function(msg){
   this.responseText=msg;
   this.HandleResponse.call(this);
   //调用用户传入的回调函数
}

7.服务器端程序的撰写。主要是向IFrame提交一个可自动运行的网页：
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY onload="doit();"></BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HTML>

localStorage是html5新增的功能，它的作用是可以在浏览器里保存我们需要的信息，从而可以在页面之间切换和使用，比cookie方便，也比cookie能够存储更多的东西，下面是几个常用的localStorage方法：

1、添加localStorage

localStorage.setItem(“key”,”value”); //以“key”为名称存储一个值“value”

2、获取localStorage

localStorage.getItem(“key”);//获取名称为“key”的值

3、删除localStorage

localStorage.removeItem(“key”); //删除名称为“key”的信息

4、清空localStorage

localStorage.clear(); //清空localStorage中所有信息

5、查看已经保存的localStorage

可通过chrome浏览器的控制台工具Resource–Local Storage里查看

1) 检测你的浏览器是否支持localStorage：

if(window.localStorage){

alert（'YES！'）；

} else alert('NO！');

2) 数据都是以键值对的形式存储在localStorage中的，使用时直接在window.localStorage中添加一个属性就可以了，定义和修改的示例如下：

//在window.localStorage添加一个test属性，并赋值test1的三种实现方式

localStorage.test = “test1”；

localStorage[“test”] = “test1”；

localStorage.setItem(“test”,”test1”);

//属性值得修改同其的定义方式一样

//属性值的获取

var test = localStorage.test;

var test = localStorage[“test”];

var test = localStorage.getItem(“test”);

//属性的删除

localStorage.removeItem(“test”);//清除属性test

localStorage.clear();//清除所有的属性

3） localStorage提供的key()和length可以方便的实现所有属性的数据遍历，例：

var storage = window.localStorage;

var key = “”;

for(var i = 0;I < storage.length;i++){

key = storage.key(i);

console.log(key + “ : ” + localStorage.getItem(key));

}

4）localStorage仅能存储这种key/value键值对形式的数据，如果我们要存储的数据量比较大那，可以试试把这些数据转化为json数据，作为value值存储进去。如：

//set the infomation

var json = {“name”:”echo”,”message”:”hello localStorage”,”id”:1};

localStorage.setItem(“info”,json);

//get the information

var info = localStorage.getItem(“info”);

info = eval(“(” + info + ”)”);

console.log(“name:”+info.name+” message:”+info.message);

5）如果你用html5 的canvas做开发，你可以把这个canvas的内容生成一个快照在另一个html中显示，如：

//普通canvas实现

var canvas = document.getElementById(“canvas”);

var url = canvas.toDataURL(“image/png”);

localStorage.setItem(“image”,url);

//如果你用webgl做3D开发，可这么实现

var url = renderer.domElement.toDataURL('image/png','name');

localStorage.setItem("image",url);

聊完了这些，让我来看看到底是怎样使用localStorage的。