js的本地存储

本地存储

cookie:生命周期：可以设定时间 内存：几kb
localStorage:生命周期：只要不手动清除，一直存在 内存：几MB
sessionStorage：生命周期：浏览器关闭就会自动清除 内存：几MB

保存数据

保存数据 localStorage.setItem(key,value) value:只能是基本类型
将JSON对象转换成JSON字符串 JSON.stringify()
将JSON对象转换成JSON字符串 JSON.stringify()
将JSON字符串转换成JSON对象 JSON.parse()

取数据 localStorage.getItem(key)

删除数据 localStorage.removeItem(key)

全部删除 localStorage.clear()

body>
    <button id="save">save保存数据</button>
    <button id="getData">getData取数据</button>
    <button id="remove">remove删除数据</button>
    <button id="clear">clear删除全部数据</button>
</body>

<script>
    /*
    cookie:生命周期：可以设定时间   内存：几kb
    localStorage:生命周期：只要不手动清除，一直存在    内存：几MB
    sessionStorage：生命周期：浏览器关闭就会自动清除  内存：几MB
    */
</script>
<script>
    if (localStorage.arr) {
        arr = localStorage.getItem('arr')
        // var arr = []
        // arr.push(1)
    }

    var arr = localStorage.getItem('arr') ? localStorage.getItem('arr') : []

    console.log(localStorage);
    console.log(localStorage.name);
    console.log(localStorage.obj);
    // 保存数据 localStorage.setItem(key,value)  value:只能是基本类型
    document.getElementById('save').onclick = function () {
        localStorage.setItem('name', 'zs')
        localStorage.setItem('age', 18)
        localStorage.setItem('name', 'ls')

        var obj = {
            "name": "zs",
            "age": "18"
        }
        var arr = [1, 2, 3]
        // 将JSON对象转换成JSON字符串 JSON.stringify()
        console.log(JSON.stringify(obj));
        console.log(typeof JSON.stringify(obj));
        localStorage.setItem('obj', JSON.stringify(obj))
        localStorage.setItem('arr', JSON.stringify(arr))

    }
    // localStorage.name = 'as'
    // 取数据 localStorage.getItem(key)

    document.getElementById('getData').onclick = function () {
        console.log(localStorage.getItem('name'));
        console.log(localStorage.getItem('age'));
        // 将JSON字符串转换成JSON对象 JSON.parse()
        console.log(JSON.parse(localStorage.getItem('obj')));
        console.log(JSON.parse(localStorage.getItem('arr')));
    }

    // 删除数据  localStorage.removeItem(key)
    document.getElementById('remove').onclick = function () {
        localStorage.removeItem('name')
        localStorage.removeItem('age')
    }
    // 全部删除 localStorage.clear()
    document.getElementById('clear').onclick = function () {
        localStorage.clear()
    }
</script>