cookie，localStorage，session的区别

cookie

cookie,就是浏览器缓存。做的是网站的身份识别，配合session使用，关于cookie的特点，有以下几个方面：

1.必须在服务器环境下使用

2.在没有设置过期时间，关闭就消失 默认过期时间是一次会话

3. cookie是一条一条存的

4. 大小容量小，4k左右

5. 不管看到的是什么，取出来都是字符串

6 .不安全

7. 在服务器环境下，每次伴随着请求会发往服务器

关于cookie的用法：

1.cookie 怎么存

document.cookie='name=value';

2. 怎么设置到期时间document.cookie='name=value;expires=xxxx'过期时间用事件戳表示

3. 目录问题

 public    cookie1

 demo1  cookie2

整个项目网站，只有一套cookie，共享一套cookie,一般cookie存在根目录下document.cookie='name=value;expires=xxxx;path=/'

4.怎么取cookie

document.cookie

---

cookie函数的设置

代码如下：

function setCookie(name,value,iDay) {

    if(iDay){

        var oDate=new Date();

        oDate.setDate(oDate.getDate()+iDay);

        document.cookie=name+'='+value+';expires='+oDate+';path=/';

    }else{

        document.cookie=name+'='+value+';path=/';

    }

}

cookie函数的获取：

function getCookie(name) {

    var arr=document.cookie.split('; ');

    for(var i=0;i

        var arr2=arr[i].split('=');

        if(arr2[0]==name){

            return arr2[1]

        }

    }

    return ''

}

如何删除cookie？

function removeCookie(name){

    setCookie(name,'',-2);

}

关于cookie的特点和用法就介绍到这里，下面开始介绍localStorage

---

localStorage（本地储存）

一：特点与局限：

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

localStorage的用法：

1.   localStorage.name=value;

          localStorage.name

          delete localStorage.name

2.  localStorage.setItem(name,value)

    localStorage.getItem(name)

    localStorage.removeItem(name)

注：这两种方法不能混用！

清除 localStorage： localStorage.clear();

---

关于sessionStorage:

只要关闭浏览器缓存就消失

使用方法：

1.      sessionStorage.name=value;

         sessionStorage.name

         delete sessionStorage.name

2.     sessionStorage.setItem(name,value)

        sessionStorage.getItem(name)

        sessionStorage.removeItem(name)

3.    全部清除 sessionStorage.clear();

---

关于这三者的特点和使用就介绍完了，下面总结一下他们的区别。

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 接口使用更方便。