js的三种数据存储方式cookie，sessionStorage，localStorage。

简述储存？

缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

js的三种数据存储方式

cookie，sessionStorage，localStorage区别

1.存储大小

cookie数据大小不能超过4k。 sessionStorage和localStorage存储大小的限制，比cookie大，可达到5M或更大。即弥补cookie的大小不足

2.有效时间

    //localStorage：    存储持久数据       浏览器窗口关闭后    数据不丢失     除非主动删除数据。
    //sessionStorage：  数据在当前         浏览器窗口关闭后    自动删除。
    //cookie：          设置cookie过期时间之前一直有效，即使窗口或浏览器关闭  默认情况下当浏览器         关闭后，cookie数据将被销毁

3.数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
sessionStorage&localStorage不会自动把数据发给服务器，仅在本地保存。

浏览器缓存有那些？通常缓存有哪几种？

cookie //1cookie的特点和作用？
1. 客户端(会话技术)，将数据保存到客户端
2. cookie 存储数据在客户端浏览器
3. 浏览器对单个cookie的大小限制为(4kb)及对同一个域名下的总cookie数量限制为(20个)
4. cookie一般用于存出少量的不太敏感的数据
5. 在不登录的情况下，完成服务器对客户端的身份识别
Session 1session的特点
服务器端(会话技术)
在一次会话的多次请求间共享数据，将数据保存在服务器端的对象中
session用于存储一次会话的多次请求的数据，存在服务器端
session可以存储任意类型，任意大小的数据
sessionStorage仅在当前会话下有效关闭页面或浏览器后就被清除

        setItem(key,value)  //设置数据 
        getItem(key)        //获取数据 
        removeItem(key)     //移除数据 
        clear()             //清除数据 
        window.sessionStorage.setItem("name","常东东");       //添加数据  
        window.sessionStorage.setItem("age","18");            
        console.log(window.sessionStorage.getItem("name"))    //获取数据    //常东东
        //window.sessionStorage.removeItem("gemder");         //清除某个数据 
        //window.sessionStorage.clear();                      //清除所有数据

localStorage h5标准新添加的技术用于长久保存整个网址的数据保存的数据没有过期时间知道手动删除 localStorage 和 sessionStorage最大一般为5mb 仅在客户端(即浏览器)中保存不参与和服务器的通信

        localStorage(key,value)    //设置数据 
        getItem(key,value)         //获取数据  
        removeItem(key)            //移除数据 
        clear()                    //清除所有值
        //localStorage也可以手动设置生效时间 即(大概)思路 是存储的值加一个时间戳下次取值时 验证时间戳 
        //注意 localStorage只能存储字符 存入时将对象转为字符串JSON.stringify(setDate)读取时也要解析JSON.parse(getData)

    var arr = [1,2,3,3,4,5,232,3,45,2]  
    window.localStorage.setItem("data",arr);              //添加数据                     
    window.localStorage.setItem("cm","180cm");            //
    console.log(window.localStorage.getItem("data"));     //获取数据  //1,2,3,3,4,5,232,3,45,2
                                                          //清除某个数据  
                                                          //清空所有数据

Cookie

是一些数据存储于你电脑上的文本文件中用于存储web页面的用户信息
Cookie 数据是以键值对的形式存在的每一个键值对都有过期时间
如果不设置时间浏览器关闭 cookie就会消失当然优化也可以手动消除cookie
Cookie每次都会携带在http请求头中如果使用cookie保存过多数据会带来性能问题
Cookie 内存受限每个域名下是4k~ 每个域名大概能存储50哥键值对

基本操作
通过访问document.cookie可以对cookie进行创建修改获取默认情况下 cookie在浏览器关闭时删除你还可以为cookie某个键值添加一个过期时间如果设置新的cookie时某个key已经存在了则会更新这个key对应的值否则他们hi同时存在cookie中

   document.cookie = "username = eddieChang";          //设置cookie  
    document.cookie = "age = 20"    
    var msg = document.cookie;                          //读取cookie 
    console.log(msg)
    
    var d = new Date();                                 //添加过期时间 单位天  
    var days = 3;                                       //3天  
    d.setDate(d.getDate()+days);     
    // console.log('tag', d)   时间戳  
    document.cookie = "username = eddieChang" + "expires="+d;
    //删除cookie 给某个键值对 设置过期时间  
    d.setDate(d.getDate() - 1);
    console.log(document.cookie)

//3个存储的共同点 d都保存在浏览器端可以指aplition 中查看
// 不同点

传递方式不同
cookie数据始终在同源的http请求中携带(即使不需要) 即cookie在浏览器和服务器来回传递
数据大小不同
cookie受限 ..... sessionStorage 和 localStoreage 虽然也有存储大小的限制但比cookie大的多 5m+~
数据有效期不同
sessionStorage 仅在当前浏览器窗口关闭前有效不可能持久保持
localStore 始值有效窗口或浏览器关闭也一直在因此作用持久数据
cookie 只在设置cookie过期的时间之前一直有效即使窗口或浏览器关闭
作用域不同
sessionStorage 不在不同的浏览器窗口中共享即使同一个页面
loca.... && cookie 在同源窗口中都是共享的
如果有错误或者不严谨的地方，请留言备注，十分感谢，对作者也是一种鼓励。