html5数据存储实验,html5-数据存储

1.Cookie

Cookie是html存储最基本的方式，他是一种存储在访问者计算机中的变量。以字符串的形式存储在计算机文件中。每当我们浏览某个网页时，都会向服务器后台发送这个cookie.

Cookie有大小限制，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

使用Cookie时需要为他设置有效期，如果不设置，在关闭浏览器的时候，cookie就会消失。

通过JS存储Cookies:

document.cookie = 'username=Darren'            以上代码中'username'表示 cookie 名称，'Darren'表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。

cookies封装函数(包括设置时间)：

function setCookie(c_name, value, expiredays){

2 　　　　var exdate=new Date();

3 　　　　exdate.setDate(exdate.getDate() + expiredays);

4 　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

5 　　}

6 　　使用方法：setCookie('username','Darren',30)

由于cookie的种种限制，所以在html5种出现了两种新的存储方式，他们能够存储更大的信息，而且使用起来较简单。

2.sessionStorage

将数据保存再session对象中。session就是指用户在浏览某个网站时，从进入网站到浏览器关闭的这段时间。 session可以保存在这段时间内所需要保存的任何数据。当该页面关闭之后，数据将消失。

使用方法：

在js中直接使用sessionStorage.setItem方法来设置需要保存的键值对，获取时通过键来寻找就可以了。

/**

* 保存sessionStorage

* @param id

*/

function saveStorage(id){

var target=document.getElementById(id);

var value=target.value;

sessionStorage.setItem("msg",value);

}

/**

* 加载sessionSttorage

* @param id

*/

function loadStorage(id){

var target=document.getElementById(id);

var value=sessionStorage.getItem("msg");

target.innerHTML=value;

}

3.localStorage：

将数据保存再客户端bending的硬件设备中，即使浏览器关闭，数据仍然保存(长期存储)

使用方法和sessionStorage类似,只需要将sessionStorage方法替换成localStorage即可

/**

* 保存localStorage

* @param id

*/

function saveStorage(id){

var target=document.getElementById(id);

var value=target.value;

localStorage.setItem("msg",value);

}

/**

* 加载sessionSttorage

* @param id

*/

function loadStorage(id){

var target=document.getElementById(id);

var value=localStorage.getItem("msg");

target.innerHTML=value;

}

sessionStorage和localStorage底层都是通过cookie来实现的。