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

巴特西

cookie和localStorage、sessionStorage的区别

一、localStorage

localStorage方法

二、sessionStorage

三、cookie

最新文章

热门文章