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();

参考：https://www.jianshu.com/p/846c033c0cc8