sessionStorage,localStorage,cookie

本文主要是介绍sessionStorage,localStorage,cookie，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

Web Storage: 实现客户端本地的存储，客服cookie的一些限制，数据量更大。

两种存储类型:
   1.sessionStorage: 存储特定于某个服务器会话的数据，在浏览器关闭之后，数据消失。因此本地运行的文件是不可用的。
   2.localStorage: 数据保存在客户端本地的硬件设备中，一直存在。

相关API:

1.    length: 返回当前storage中的数目。
2.    key(n):返回第n个条目
3.    getItem(key):根据指定的key值获取对应的value值
4.    setItem(key,value):设置指定key值的内容为value
5.    removeItem(key);根据指定的key值，键值为key的内容
6.    clear():删除所有值。firefox中没有实现。

限制：大多数浏览器会对同一个来源的数据存在大小的限制，大部分限制5MB，但是也有一部分限制2.5MB

例子：实现一个简单的留言板功能，利用localStorage存储，并显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web storage</title>
<script>
function saveStorage(id)
{
var data = document.getElementById(id).value;
var time = new Date().getTime();//获取时间戳作为key值
localStorage.setItem(time,data);//添加一条留言
alert("提交成功");
loadStorage("msg");
}
function clearStorage(){//清除所有的内容
localStorage.clear();
alert("已全部清除");
loadStorage("msg");
}
function loadStorage(id){
var result = '<table border="1px">';
for(var i =0;i<localStorage.length;i++){
var key = localStorage.key(i);
var value = localStorage.getItem(key);//根据key值获取对应的留言
var date = new Date();
date.setTime(key);
var datestr = date.toGMTString();
result+='<tr><td>'+value+'</td><td>' + datestr + '</td></tr>';
}
result +='</table>';
document.getElementById(id).innerHTML = result;
}
</script>
</head>
<body>
<header >留言板</header>
<form>
<textarea id="message" cols="150" rows="30"></textarea><br>
<input type="button" value="提交" οnclick="saveStorage('message')">
<input type="button" value="清除" οnclick="clearStorage()">
</form>
<p id="msg"></p>
</body>
</html>