js高级locatStorage对象

他的生命周期

//基本样式
    <button id="save">保存数据</button>
    <button id="getDate">读取数据</button>
    <button id="del">删除单个数据</button>
    <button id="delAll">删除所有数据</button>
    <button id="getKey">获取属性名</button>


 /*
      cookie        生命周期：可以设置时间   内存大小：几kb

      localStorage   生命周期：只要不手动清除，一直存在   内存大小：几Mb

      sessionStorage   生命周期：浏览器关闭时销毁    内存大小：几Mb
    */

1.localStorage对象

//写法：
//1.  保存数据：localStorage.setItem(key, value);
//
    console.log(localStorage);
    document.getElementById('save').onclick = function () {
        localStorage.setItem('name', '晓明')
        var obj = {
            name: 'xiaohua',
            age: 18
        }
        console.log(obj);
        localStorage.setItem('age', JSON.stringify(obj))
        localStorage.setItem('A', 'a')
        localStorage.setItem('B', 'b')
//2.读取数据：localStorage.getItem(key)
    document.getElementById('getDate').onclick = function () {
        console.log(localStorage.getItem('name'));
        console.log(JSON.parse(localStorage.getItem('age')));
    }
//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(3)
        console.log(key);
    }