localStorage和sessionStoreage和cookie 之间的区别

简介

在vue组件学习中，我们学习了利用this.$emit来实现组件之间的数据传递，接下来我们将学习利用浏览器本地存储来传递数据

localStorage

localStorage的生命周期是永久，也就是说除非用户在浏览器提供的UI上清除localStorage数据，否则这些信息将永久保存。localStorage 有存储大小的限制但可以达到5M或更大。

<div id="app">
        <test></test>
        <input type="button" value="获取" @click='getinfo'>
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'',
            },
            methods: {
                getinfo(){
                    //通过getItem来获取localStorage中对应名称的数据
                    var data = localStorage.getItem('childinfo')
                    this.msg=data
                }
            },
            components:{
                test:{
                    template:`<input type="button" value="传递" @click='postinfo'>`,
                    data() {
                        return {
                            msg:{
                                name:'张三',
                                sex:'man'
                            }
                        }
                    },
                    methods: {
                        postinfo(){
                            //使用setItem来将数据传递到localStorage中，这里需要使用JSON.stringify来将对象转化为json格式字符串，这样存储的才是我们想要的样式
                            localStorage.setItem('childinfo',JSON.stringify(this.msg))                           
                        }
                    },
                }
            }
        })
    </script>

在这里我们可以看到信息已经存储到localStorage中

sessionStoreage

sessionStoreage与localStorage的使用方法相同，都是通过setItem和getItem来存储和获取信息，它们的存储大小也相同，但是sessionStoreage存储的数据并不是永久的，在关闭页面或浏览器侯，sessionStoreage中的信息会被清除


可以看到在关闭页面，重新进入后sessionStoreage中信息被清空，但localStorage中数据还在

cookie

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”
设置 cookie 值的函数

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。
该函数设置了 cookie 名、cookie 值、cookie过期时间。
获取 cookie 值的函数

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + “=”。

使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(’;’))。

循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。

如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 “”。

区别

1. 存储大小的不同：
   localStorage和sessionStorage的大小一般为5M
   cookies的大小一般为4K
2. 有效期不同：
   localStorage的有效期为永久有效，除非你进行手动删除。
   sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。
   cookies在设置的有效之前有效，当超过有效期便会失效。
3. 与服务器端的通信
   localStorage不参与服务器端的通信。
   sessionStorage不参与服务器端的通信。
   cookies参与服务器端通信，每次都会携带http的头信息中。（如果使用cookie保存过多数据会带来性能问题）