HTML5的WebStorage

H5新增的web 存储

Web存储 localStorage

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

sessionStorage属于会话级存储，关闭标签即删除

localStorage

没有时间限制，主流浏览器的存储单位大约为5M，并且是以键值对的形式进行存储，localstorage一把在同源策略下的本地存储。

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

// localStorage 的的增加
localStorage.setItem("name","123");
// localStorage的获取
localStorage.getItem('name');//123
// 修改则只需要覆盖就行
// 删除操作
localStorage.removeItem('name');
// 清除本地所有的localStorage,不需要加参数
localStorage.clear();

我们可以对用户访问页面的次数进行计数：

//如果在localStorage中有这个则加1，反之则减1
if (localStorage.pagetime) {
    //进行localhost的计数
	localStorage.pagetime = Number(localStorage.pagetime) + 1;
} else {
	localStorage.pagetime = 1;
}
document.write("Visits " + localStorage.pagetime + " time(s).");

sessionStorage

session的用法大致和localStoring一致。只不过是会话级的保存，关闭页签即删除。

cookie

Cookie 是一些数据, 在Html5之前就存在的，存储于你电脑上的文本文件中。这里只是比较，相对cookie，webStorage利用同源策略更安全。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=gangdan

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。