4.9、cookie和WebStorage的区别和使用

一、WebStorage包括sessionStorage和localStorage
cookie、sessionStorage和localStorage的区别
1）、数据的生命周期来看
（1）Cookie一般由服务器生成，可设置失效时间如果在浏览器端生成cookie 则默认是浏览器关闭后失效
（2）localStorage 是浏览器存储，除非手动清除，否则永久保存在本地
（3）sessionStorage是浏览器缓存，仅在当前会话或当前页面有效，关闭页面后清除或手动清除

2）、存放数据的大小
（1）cookie 大小一般为4k左右
（2）localstorage和sessionstorage存放的大小一般为5MB左右

3）与服务器端通信
（1）cookie 每次都会携带在http请求头中。如果cookie携带过多的参数，则会带来性能问题
（2）localStorageh和sessionStorage 尽在客户端保存和使用，不参与和服务器的通信

3）易用性
（1）cookie需要程序员自己封装 ，源生的cookie接口不友好
（2）localstorage和sessioonStorage，可以源生接口可以接收，可以在此封装，对Object和array有更好的支持

使用这里暂时先讲解Webstorage的两个存储
localStorage的使用

  <input type="text"> <button>存储</button>
 <script>
        var inp = document.getElementsByTagName('input')[0]
        var btn = document.getElementsByTagName('button')[0]
        btn.onclick = function() {
            // 获取inp的值存储到localStorage
            // inp.value
            // localStorage.setItem('key', inp.value) //key是自定义的键  inp.value是输入框的值
            // console.log(localStorage.getItem('key')) //取值  直接取键对应的值
            // localStorage.removeItem('key', inp.value) //删除
            // console.log(localStorage.getItem('key')) //删除过之后再取值就是null


            // 存数组或object
            var arr = [0, 2, 3, 4]
                // 注意Webstorage只能存储字符串
            localStorage.setItem('arr', arr)
            console.log(localStorage.getItem('arr')) //0,2,3,4 
            console.log(typeof(localStorage.getItem('arr'))) //string



            //显然上述不是我们想要的所以存的时候要先转为字符串
            // 方法JSON.stringify(arr)
            // 试一试
            var arr1 = [0, 2, 3, 4]
            var strarr = JSON.stringify(arr1)
            localStorage.setItem('arr1', strarr)
            console.log(localStorage.getItem('arr1')) // '[0,2,3,4]'
            console.log(typeof(localStorage.getItem('arr1'))) //string



            // 在将字符串转成我们想要的对象数组
            // 方法 JSON.parse(localStorage.getItem('arr1'))
            console.log(JSON.parse(localStorage.getItem('arr1'))) // [0,2,3,4]
            console.log(typeof JSON.parse(localStorage.getItem('arr1'))) //object

   //清楚localStorage本地缓存 全部清空
            localStorage.clear();

        }
    </script>


sessionStorage 和localStorage用法一样 把上面所有的localStorage换成sessionStorage即可

二、cookie的使用

// 注意cookie是在服务器里才能展示出来
// 设置cookie   document.cookie='key=value' //默认会话过期
document.cookie = 'name=李sir'
    // 设置过期时间
    // document.cookie = 'key=value;esprise=' + 字符串格式的时间
    // 过期时间的设置
var date = new Date() //获取当前的时间

console.log(date.getDate()) //19 //得到当前的日
var esprise = date.getDate() + 5 //当前的时间加上5 就是24 
document.cookie = 'name=陈sir;esprise=' + esprise.toString()
    //将日期转化成字符串格式的  设置的过期时间就是五天后过期

读取
        //读取全部的koocie
        document.cookie
            // 返回的是
            // age=3; sex=nan; name=mrs陈   
             //age=3;空格sex=nan;空格name=mrs陈