让网页在用户计算机上保存一些临时或长期的信息

本地存储——对应localStorage对象

会话存储——对应sessionStorage对象

两者区别仅在于数据的寿命。他们都与网站的域联系在一起。同样的保存在计算机或移动设备上的数据也与设备是绑定的，网页不能访问保存在其他用户计算机上的数据

大多数浏览器把本地存储的限制设为5M，因此本地存储来缓存大图片或视频文件时不太适合的

存储数据

语法：localStorage[keyName]=data; 或sessionStorage[keyName]=data;

var localData = document.getElementById("localData").value;

localStorage["localData"] = localData;  

读取的时候也很简单：alert("你之前存储的本地数据是"+localStorage["localData"])；

还有可能某个键下面没有保存任何数据，检测值是否为空直接测试是否等于null

删除数据项

localStorage.removeItem("user_name");   //根据键名删除数据

或者是更厉害的sessionStorage.clear();  清空在本地的所有数据

查找所有数据项

key()方法，从本地或会话存储中取得所有数据项

function findAllItems() {

  var itemList = document.getElementById("itemList");

  itemList.innerHTML = "";

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

    var key = localStorage.key(i);  //取得当前位置的数据项的键名

    var item = localStorage[key];   //获取对应的值

    var newItem = document.createElement("li");

    newItem.innerHTML = key + ": " + item;

    itemList.appendChild(newItem);

  }

}

保存数值和日期

使用web存储会被自动转化为文本，那么如何存储数值呢？

x=Number(localStorage["mazeGame_currentX"])   //Number函数可将参数转化为数值

日期保存需要更麻烦的转换，可按照既定格式把日期转换为文本，之后再根据文本创建日期对象

var today = new Date();

SessionStorage["session_started"]=today.getFullYear()+"/"+today.getMonth()+"/"+today.getDate();   //按照YYYY/MM/DD的标准格式把日期转换为文本字符串

……

today=new Date(SessionStorage["session_started"]);       //创建日期对象，因为文本是有效的日期形式

保存对象

利用结构化数据，先在保存本地数据的地方使用JSON.stringfy()函数，然后在需要使用数据的地方调用JSON.parse()函数即可获得存储在本地的对象

相应存储变化

Web存储提供了在浏览器不同窗口间通信的机制

当第一个页面添加、修改、删除或清除数据的时候，设置了监听事件的第二个页面能获取到这些变化

第一个页面负责保存数据，此处不再赘述

第二个页面：

window.onload = function(){

    window.addEventListener("storage",storageChanged,false);   //把onStorage事件与storageChanged()函数联系起来。这里不是使用的window.onstorage,而调用的是监听，这样是为了保证在所有浏览器中都能执行

};

function storageChanged(e){

    var message=document.getElementById("updateMessage");

    message.innerHTML="本地存储有更新.";

    message.innerHTML="<br>key:"+e.key;    

    message.innerHTML="<br>Old value:"+e.oldValue;    

    message.innerHTML="<br>new Value:"+e.newValue;    

    message.innerHTML="<br>URL:"+e.url;    

}

本地文件会被直接交给JavaScript代码，而不是向服务器提交文件设计的。File API不能修改文件、不能创建新文件

取得文件

• 使用input元素,type设置为file
• 隐藏的input元素，用按钮显示出来
• 拖放

浏览器支持情况

Firefox>3.6       Chrome>8     Safari>6      Opera>11.1       Android>3          IE目前貌似还没有支持，不知道10可以了不

读取文本文件

FIle API可以直接读取文本内容

<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">

function processFiles(files) {

  var file = files[0];

  var reader = new FileReader();

  reader.onload = function (e) {

    // 这个时间被触发说明数据准备好了.

    // 内容被复制到页面中的DIV中.

     var output = document.getElementById("fileOutput");   

     output.textContent = e.target.result;       //从readAsText()中来的

  };

      reader.readAsText(file);     //readAsText把文本内容转化为一个长字符串，保存在发送给onload时间的e.target.result中。它只能处理包含文本内容的文件。FileReader还有很多其他的方法，比如readAsBinaryString(), readAsDataURL()

}

替换标准上传控件

标准的上传空间超丑，可以把inpute元素隐藏掉，然后用一个漂亮的按钮代替，最后在点击按钮的时候在对应的事件中手工调用被隐藏的input元素的click方法

function showFileInput() {

  var fileInput = document.getElementById("fileInput");

  fileInput.click();    //调用input的click函数，这样弹出选择文件的对话框。其他的无变化

}

一次读取多个文件

<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)" multiple>

function processFiles(files) {

for(var i=0;i<files.length;i++)

  var file = files[i];  

  var reader = new FileReader();

  reader.onload = function (e) {

……   //与上一例子相同的代码

  };

      reader.readAsText(file);    

}

}

读取图片文件

http://www.prosetech.com/html5/Chapter%2009/ReadImage.html

<script>

var dropBox;

window.onload = function() {

  dropBox = document.getElementById("dropBox"); 

  dropBox.ondragenter = ignoreDrag;   //鼠标进入目标区域触发，浏览器不做反应

  dropBox.ondragover = ignoreDrag;    //鼠标维语目标区域之上，不做反应

  dropBox.ondrop = drop;         //拖放结束，需要做处理

}

function ignoreDrag(e) {        //我们在处理拖放，确保没有其他元素取得这个事件

  e.stopPropagation();

  e.preventDefault();

}

function drop(e) {                

  e.stopPropagation();    //取消事件传播及默认行为

  e.preventDefault();

  var data = e.dataTransfer;        //取得拖放进来的文件

  var files = data.files;

  processFiles(files);         //传递给真正处理文件的函数

}

function processFiles(files) {

  var file = files[0];

  var output = document.getElementById("fileOutput");

  var reader = new FileReader();

  reader.onload = function (e) {

        dropBox.style.backgroundImage = "url('" + e.target.result + "')";      //将图片文件设置为背景图片

  };

  reader.readAsDataURL(file);          //将图片转换为数据URL，跟Canvas中一样，数据URL是用场字符串表示图片的方式，使得传递图片数据变得十分方便

}

function showFileInput() {

  var fileInput = document.getElementById("fileInput");

  fileInput.click();

} 

</script>

更强大的本地存储  Indexed DB标准，

http://html5labs.interoperabilitybridges.com/prototypes/indexeddb/indexeddb/info    HTML5实验室中可以尝试了解一下