html5webstorage

本地存储

html5之前浏览器本地存储的方法为cookie】

相对与存储在客户端，存储数据在服务器端才更安全，可靠，高效

cookie存储少量数据比较方便

但是cookie的缺陷也十分明显。从我一开始学习web时就被告知少用cookie，但我一直没去深究为什么要少用cookie。运用cookie十分简单方便，是什么原因让我们放弃cookie呢。下面就是我找的一些有关cookie的缺陷，操作的cookie的javascript语法不够人性化

必须处理过期的数据

1.数据大小：作为存储容器。cookie的存储大小只有4KB。只能存储少量数据。

2.安全性问题：在HTTP请求中的cookie是明文传递的。所以安全性比较低

3.网络负担：cookie会被附加在每个http请求中，在HTTPrequest和HTTPresponse的header中 都是被传输的，造成流量损失。

web storage 

HTML5的本地存储

分为localstorage和sessionstorage

能无限期存储在计算机上（不会发送到服务器，除非你自己发送）

能用几个简单的javascript对象操作webstorage

存储空间足够

适合开发离线应用（离线应用的数据无论用户能不能上网都可以在本地保存）

web storage又分为

local storage 本地存储     长期存储数据

session storage 会话存储   只要不关闭标签页或者窗口，数据还在

无论本地存储还是会话存储，保存的数据都和域有关，不在同一个域中或者不是同一个浏览器，或者不同的设备都不能共享数据

we storage的存储空间一般浏览器设为5MB

存储数据

要把一段信息保存在本地存储或会话存储中，首先要为信息指定一个名字。这个名字称为键，要通过他来取回数据。

保存数据   localStorage.setItem()

localStorage.setItem(keyName,data);

假设保存用户名

lacalStorage.setItem(“USER_NAME”,”MIKE");

USER_NAME就为键

存储动态数据

//取得文本框

var nameInput=document.getElementById(“username”);

//保存文本框中的文本

localStorage.setItem(“USER_NAME”,nameInput.value);

取回数据

localStorage.getItem(“USER_NAME”);

测试一个键是否为空。直接测试他是否等于null

要取回数据还有两种方式

localStorage.USER_NAME;

localStorage[“USER_NAME”];

在测试的时候一定要放在本地或者远程服务器上打开  否则会出现报错

浏览器支持情况   除了ie7基本都支持（可以用cookie来模拟本地存储）

ie8支持wegstorage但不支持onstorage事件

删除数据项

localStorage.removeItem(“USER_NAME");

//删除了用户名

或者清除全部数据

localStorage.clear();

sessionStorage.clear();

var key=localStorage.key(i);

//得到key（键）

var item=localStorage.getItem(key);

//得到值

当遇到数字时

可以运用Number();

来讲获取的数据转化为数字进行加法运算

保存对象

保存对象时可以用到JSON

通过JSON.stringify();可以把对象连同他的数据都转换为文本格式

调用JSON.parse();可以把数据转换为对象

响应存储变化

当本地储存或者回话存储发生变化时访问同一页面或者同一站点中其他页面的窗口就会触发window.onStorage事件

//但是当操作一些对存储不产生任何影响的操作时，不会触发onStorage事件（比如用既有的简明保存相同的值，或者清除原本就是空的存储空间）

ff中的window对象没有onstorage属性

//并且在ie8以前不能使用addEventListener

读取文件

File API

ie10才开始支持

通过File API获取到文件后直接交给javascript代码

file API不能创建新的文件夹，不能修改文件

取得文件

有三种方式取得文件

<input>元素   type=file   通过javascript代码来实现本地打开file

隐藏input

拖放