localStorage、sessionStorage、cookie有什么区别

一、共同点

        在客户端存放数据。

二、区别

        sessionStorage：仅在当前浏览器窗口有效，关闭浏览器就没了。存储量不能超过5M。不能再不同的浏览器中共享，即使是同一个页面。

<script>
    //设置sessionStorage保存到本地，第一个为变量名，第二个是值
    sessionStorage.setItem('A', 'B')
    // 获取数据
    sessionStorage.getItem('A')
    // 删除保存的数据
    sessionStorage.removeItem('A')
    // 清除所有保存的数据
    sessionStorage.clear()
</script>

        localStorage：持久化存储，关闭浏览器，下次进来还有。存储量不能超过5M。在所有的同源窗口都是共享的。

<script>
    //设置localStorage保存到本地，第一个为变量名，第二个是值
    localStorage.setItem('A', 'B')
    // 获取数据
    localStorage.getItem('A')
    // 删除保存的数据
    localStorage.removeItem('A')
    // 清除所有保存的数据
    localStorage.clear()
</script>

        cookie：需要线上环境。可以设置过期时间（把时间调整到之前的时间），只在设置的cookie过期时间之前有效，即使窗口或浏览器关闭，都是有效的。存储量不能超过4k。在所有的同源窗口都是共享的。

<script>
    //设置cookie
    setCookie(name,value,expiredays){//设置时间为天为过期单位
        var exdate=new Date();
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie=name + '=' + escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    },
    //获取cookie
    getCookie(name){
        var start = document.cookie.indexOf(name+'=')
        var end = document.cookie.indexOf(';',start)
        if(end=-1){
            end = document.cookie.length
        }
        return unescape(document.cookie.substring(start,end))
    }
</script>

三、注意

        根据浏览器的不同，存储的大小是不同的。