前端面试（一）本地浏览器存储

 3. 说说浏览器本地存储

 1. js中包含sessionStorage和localStorage以及cookie三种浏览器端的数据存储方式。

• sessionStorage 、localStorage 和 cookie 之间的共同点：都是保存在浏览器端，且同源的。
• sessionStorage 、localStorage 和 cookie 之间的区别：

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有网址路径（path）的概念，可以限制cookie只属于某个网址路径下。

2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。


4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

2.使用方法

1. - sessionstorage

 sessionStorage.setItem("name","luanpeng");      //添加存储key-value
 sessionStorage.age = 12;                        //设置数据
 for(var key in sessionStorage)                  //遍历数据
 console.log(sessionStorage.getItem(key));   //getItem读取属性值
 delete  sessionStorage.name;                    //删除数据
 sessionStorage.removeItem("age");               //删除数据

1. - localstorage

- localstorage同一个对象访问必须域名相同。数据保留至用户删除或清除缓存

    localStorage.setItem("name","luanpeng");        //添加设置属性
    localStorage.age = 12;                          //添加设置
    console.log(localStorage.getItem("age"));       //读取
    console.log(localStorage.name);                 //读取

1. cookie

export const cookie = {

    //根据key值获取对应的cookie
    get: (key) => {

        //获取cookie
        const data = document.cookie;
        //获取key第一次出现的位置    pwd=
        let startIndex = data.indexOf(key+'=');
        //  name=123;pwd=abc
        //如果开始索引值大于0表示有cookie
        if(startIndex>-1) {

            //key的起始位置等于出现的位置加key的长度+1
            startIndex = startIndex+key.length+1;

            //结束位置等于从key开始的位置之后第一次;号所出现的位置

            let endIndex = data.indexOf(';',startIndex);

            //如果未找到结尾位置则结尾位置等于cookie长度，之后的内容全部获取
            endIndex = endIndex<0 ? data.length:endIndex;

            return decodeURIComponent(data.substring(startIndex,endIndex));


        }else {

            return '';
        }

    },

    set:(key,value,time) => {
        //默认保存时间
        var time = time;
        //获取当前时间
        let cur = new Date();
        //设置指定时间
        cur.setTime(cur.getTime()+time*24*3600*1000);

        //创建cookie  并且设置生存周期为GMT时间
        document.cookie = key+'='+encodeURIComponent(value)+';expires='+(time===undefined?'':cur.toGMTString());

    },

    del:function(key){

        //获取cookie
        const data = this.get(key);

        //如果获取到cookie则重新设置cookie的生存周期为过去时间
        if(data!==false){

            this.set(key,data,-1);

        }

    }

};

3.注意点 

1. localStorage和sessionStorage只能存储字符串类型的对象；
2.  localStorage是永久存储的，除非用户显示的删除；
3. sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页关闭了sessionStorage将清空；
4. 不同浏览器不能共享sessionStorage和localStorage中的信息；
5. 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。