当前位置: 首页 > 互联网 > 正文

《HTML5揭秘》笔记四(Web存储)

Web应用中的数据可以保存到两个地方,一个是Web服务器,一个是Web客户端(用户的计算机)。这两个地方各自都有适合保存的数据。Web服务器适合保存敏感的信息,以及那些你不希望被别人篡改的数据。而有时候,把一丝不太重要的信息放在用户计算机上相对会更加方便。在HTML5之前,本地存储的唯一方案就是使用cookie。而在HTML5中新增了更好的本地存储功能,让我们在访客的计算机上保存数据更加方便,这个新功能叫Web存储(Web Storage)。Web存储又分两种,分别对应两个JavaScript对象:本地存储和会话存储。

Web存储

本地存储,对应localStorage对象,用于长期保存整个网站的数据。

语法:localStorage[keyName] = data,还要以用localStorage.keyName = data;

[code lang=”js”]
var nameInput = document.getElementById("userName");
localStorage["user_name"] = nameInput.value;
[/code]

会话存储,对应sessionStorage对象,用于临时保存针对一个窗口(或标签页)的数据。

语法:sessionStorage[keyName] = data

[code lang=”js”]
var today = new Date();
sessionStorage["lastUpdateTime"] = today.getHours() + ":" + today.getMinutes();
[/code]

删除数据项

语法:localStorage.removeItem(keyName);localStorage.clear();

查找所有数据项,示例代码如下

[code lang=”js”]
function saveData(){
var inputName = document.getElementById("user_name");
var inputAge = document.getElementById("age");

localStorage["user_name"] = inputName.value;
localStorage["age"] = inputAge.value;
}

function getData(){
var itemList = document.getElementById("item_list");

itemList.innerHTML = "";

for(var i = 0 ; i < localStorage.length; i++){
var key = localStorage.key(i); //注意是(i),不是[k]

//var item = localStorage[key];
var item = localStorage.getItem(key); //这样也可以

var newItem = document.createElement("li");
newItem.innerHTML = key + ":" + item;
itemList.appendChild(newItem);
}
}
[/code]

注意一个细节,所有被保存在localStorage和sessionStorage内的值都是文本。如果再赋值时需要进行相应的类型转换,否则可能会出现错误。

读取文件

FileAPI只是规定怎么从硬盘上提取文件,直接交给在网页中运行的Javascript代码。然后代码可以打开文件探究数据,无论是文本文件还是其他文件。FileAPI不是为了向服务器提交文件设计的。FileAPI不能修改文件,不能创建新文件,想保存任何数据,你都要采取其他办法,比如通过XMLHttpRequest把数据发送到服务器,或者把它保存到本地存储空间中。

获取文件方法:FileReader.readAsText(file)方法,还有readAsBinaryString(),readAsDataURL(),readAsArrayBuffer()等方法:

[code lang=”js”]
function processFiles(files){
var file = files[0];
var reader = new FileReader();

reader.onload = function(e){
var output = document.getElementById("fileOutput");
output.textContent = e.target.result;
}

reader.readAsText(file);
}
[/code]

读取图片文件

将图片拖放到网页区域,进行图片的读取,示例代码:

[code lang=”html”]
<!DOCTYPE html>
<html lang="zh-CN"/>
<head>
<meta charset=’utf-8’/>
<title>Missing HTML5</title>
<style type="text/css">
#dropBox{
margin: 15px;
width: 300px;
height: 300px;
border: 5px dashed gray;
border-radius: 8px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}

#dropBox div{
margin: 100px 70px;
color: orange;
font-size: 25px;
font-family: Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<div id="dropBox">
<div>Drop you image here…</div>
</div>
<script type="text/javascript">
var dropBox;
function processFiles2(files){
var file = files[0];
var reader = new FileReader();

reader.onload = function(e) {
dropBox.style.backgroundImage = "url(‘" + e.target.result + "’)";
};
reader.readAsDataURL(file);
}

function ignoreDrag(e){
e.stopPropagation();
e.preventDefault();
}

function drop(e){
e.stopPropagation();
e.preventDefault();

var data = e.dataTransfer;
var files = data.files;
processFiles2(files);
}

window.onload = function() {
dropBox = document.getElementById("dropBox");
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
</script>
</body>
</html>
[/code]

小结

理角web存储中本地存储和会话存储的概念。理解本地存储与会话存储的时效,作用范围。理解Web存储的内容是文本,如果是对象,则需将对象用JSON.stringify(obj)方法转换成字符串,读取时用JSON.parse()方法转成对象再进行处理。Web存储是客户端的数据存储方法,与服务端存取并没有直接的联系。另外文件读取,也仅是在客户端进行文件的读取,并不能直接与服务端进行交互。要注意文件读取的几个方法,并会用基本的javascript进行文件和图片的读取。

本文固定链接: http://www.byhard.com/?p=1353 | 海纳百川

该日志由 byhard 于2015年04月16日发表在 互联网 分类下,
原创文章转载请注明: 《HTML5揭秘》笔记四(Web存储) | 海纳百川
关键字: ,

报歉!评论已关闭.