1. cookie 容量小：4k，在同源的http请求时携带传输，占用带宽，有日期限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
//写cookie
$.cookie(‘mycookie‘,‘ok‘,{expires:7,path:‘/‘});
//读cookie
var val = $.cookie(‘mycookie‘);
alert(val)
</script>
</head>
<body>
</body>
</html>
2. localStorage 容量更大：5M，不会再请求时携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
<!--写入数据-->
localStorage.setItem(‘kid‘,‘beautiful!‘);
//读取数据
alert(localStorage.kid);
</script>
</head>
<body>
</body>
</html>
3. sessionStorage 容量>=5M，不会在请求时携带传递，在同源的当前窗口关闭前有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
<!--写入数据-->
sessionStorage.setItem(‘pwd‘,‘111‘);
//读取数据
alert(sessionStorage.pwd);
</script>
</head>
<body>
</body>
</html>
localStorage 和 sessionStorage 合称Web Storage,支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage，只能用cookie
原文：https://www.cnblogs.com/gaoquanquan/p/9226297.html