HTML5的web存储

存储

cookie：生命周期：可以设置时间 。 内存大小：几kb
localStorage：生命周期：只要不手动清除，一直存在。内存大小：几Mb
sessionStorage：生命周期：浏览器关闭时销毁。 内存大小：几Mb

cookie 和localStorage区别
1.存储大小不一样
2.发送请求的时候会默认携带cookie

localStorage对象
1.保存数据：localStorage.setItem(key(//属性名),value（//属性值 只能是基本数据类型）) key value 都是字符串的形式

 document.getElementById('save').onclick=function(){
        localStorage.setItem('姓名','小八')
    }

//放对象的时候
JOSN.stringify() 把对象变成字符串的形式

  var obj={
         name:'老余',
         age:19
     }
     localStorage.setItem('obj',JSON.stringify(obj))

2.读取数据：localStorage.getItem(key)
JOSN.parse() 把字符串转化为对象

    document.getElementById('getDate').onclick = function (){
      console.log(JSON.parse(localStorage.getItem('obj')));
   }//{name: '老余', age: 19}

3.删除单个数据：localStorage.removeItem(key)

 document.getElementById('del').onclick = function () {
        // localStorage.removeItem('name');
        localStorage.removeItem('age');
        console.log(localStorage);
    }

4.删除所有数据：localStorage.clear()

  document.getElementById('delAll').onclick = function () {
        localStorage.clear()
        console.log(localStorage);
    }

5.得到某个索引的key localStorage.key(index)

  document.getElementById('getKey').onclick = function () {
        var key = localStorage.key(0)
        console.log(key);//姓名
    }

sessionStorage
1.保存数据：sessionStorage.setItem(key(//属性名),value（//属性值 只能是基本数据类型）) key value 都是字符串的形式
2.读取数据：sessionStorage.getItem(key)
3.删除单个数据：sessionStorage.removeItem(key)
4.删除所有数据：sessionStorage.clear()
5.得到某个索引的key sessionStorage.key(index)