cookie和localStorage、sessionStorage的区别
先来讲讲localStorage吧，我最初接触localStorage，是听一个同学说他在做项目的过程中用到过这个。但是我自己也用到过的，就是在学习React的时候，在做一个小demo，这个demo简单来说就是一个静态的留言板吧，不能对下面的评论进行任何操作。但是在react中，存储这些评论用的是localStorage。这里先不说，这个demo的详细解说我留在下一篇博客中。
一、localStorage
顾名思义：本地存储，再准确点来说，就是在客户端存储数据。
HTML5提供了两种在客户端存储数据的新方法：
- localStorage：没有时间限制的数据存储
- sessionStorage：针对一个session的数据存储
之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高
在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使得在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储在不同的区域，并且一个网站只能访问其自身的数据。
HTML5使用JavaScript来存储和访问数据。
localStorage方法
localStorage方法存储的数据没有时间限制。
如何创建和访问locaStorage
localStorage.lastname = "smith";
document.write(localStorage.lastname);
//对用户访问页面的次数进行计数
if(localStorage.pagecount){
console.log(typeof(localStorage.pagecount)); //string
localStorage.pagecount = Number(localStorage.pagecount) + 1;
}else{
localStorage.pagecount = 1;
}
document.write("Visits" + localStorage.pagecount + " times(s)");
//当用户关闭浏览器窗口后，会继续计数。
二、sessionStorage
这个方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除
如何创建并访问一个sessionStorage
sessionStorage.lastname = "smith";
document.write(sessionStorage.lastname);
//sessionStorage对用户访问页面的次数进行计数
if(sessionStorage.pagecount){
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
}else{
sessionStorage.pagecount = 1;
}
//当用户关闭浏览器窗口，然后再试一次，计数器已经重置了。
一般情况下，浏览器不会修改cookie，但会频繁操作两个storage。如果保存了cookie的话，http请求中一定会带上，而两个storage可以由脚本选择性的提交。
sessionStorage会在会话结束之后销毁，而local的那个会永久保存直到覆盖。cookie会在过期时间之后销毁。
安全性方面，cookie中最好不要放置任何明文的东西。两个storage的数据提交后在服务端一定要校验
相同点：
三者都可以用来在浏览器端存储数据，而且都是字符串类型的健值对。
三、cookie
主要作用
cookie的是用来解决“如何保存客户端的用户信息”。当用户访问web页面的时候，他的名字可以记录在cookie中，当用户下一次访问该页面的时候，可以在cookie中读取用户访问记录。
方式
cookies以名值对的形式进行存储，当浏览器从服务器上请求web页面的时候，属于该页面的cookies会被添加到该请求中。服务端通过这种方式来获取用户的信息。cookie用来识别用户。
用户遇到的情况
- 访问者首次访问页面时，会填写名字和密码，这些都会存储在cookie中，当访问者再次访问网站时，他们会收到类似“welcome xxx”，这个名字是从cookie中取回的。
- 访问者勾选了记住密码的时候，密码会被存储在cookie中，可以从cookie中取密码，然后填充在输入框中
- 访问者首次访问某个网站时，当前日期可存储于cookie中，当他们再次访问网站的时候，会收到类似上次您于什么时间登录。
创建cookie
js可以使用document.cookie属性来创建、读取以及删除cookies
document.cookie = "username=sminocence";
还可以为cookie添加一个过期的时间（以UTC或者GMT）,默认情况下，cookie会在浏览器关闭时删除：
document.cookie = "username=sminocence; expires=Thu, 18 Dec 2013 12:00:00 GMT";
还可以使用path参数告诉浏览器cookie的路径。默认情况下，cookie属于当前页面
document.cookie = "username=sminocence; expires=Thu, 18 Dec 2013 12:00:00 GMT;path=/";
获取cookie
可以通过以下代码来读取cookies
var x = document.cookie;//将以字符串的方式返回所有的cookies，类型格式：cookie1=value；cookie2=value；cookie3=value；
修改cookie
document.cookie="username=sminocence; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//修改cookie类似于创建cookie，旧的cookie会被覆盖，删除的时候，不必指定cookie的值。
一个小栗子
//创建cookie
function setCookie(name,value,exdays){
var date = new Date();
date.setTime(date.getTime() + (exdays*24*60*60*1000));
var expires = "exdays=" + date.toGMTString();
document.cookie = name + "=" + value + expires;
}
//获取cookie
function getCookie(name){
var myname = name + "=";
var ca = document.cookie.split(";");
for(var i=0,len = ca.length;i<len;i++){
var c = ca[i].trim();//去掉字符串首尾空格
if(c.indexOf(myname) == 0){
return c.substring(myname.length,c.length);
}
}
return "";
}
//检测cookie
function checkCookie(){
var user = getCookie("username");
if(user != ""){
alert("welcome" + user);
}else {
user = prompt("请输入你的名字：","");//用于显示可提示用户进行输入的对话框
if(user != "" && user != null){
setCookie("username",user,7);
}
}
}
checkCookie();
