H5C3本地存储

cookie、localStorage、seccionStroage的区别

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

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

localStorage

保存数据 localStorage.getItem(key,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.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.removerItem(key)

   document.getElementById('remove').onclick = function () {
        localStorage.removeItem('name')
        localStorage.removeItem('age')
    }

全部删除 localStorage.clear()

   document.getElementById('clear').onclick = function () {
        localStorage.clear()
    }

sessionStorage

保存数据 sessionStorage(key,value)

    document.getElementById('save').onclick = function () {
        sessionStorage.setItem('name', 'zs')
        sessionStorage.setItem('age', 18)

    }

取数据 sessionStorage.getItem(key)

    document.getElementById('getData').onclick = function () {
        console.log(sessionStorage.getItem('name'));
        console.log(sessionStorage.getItem('age'));
    }

删除数据 sessionStorage.removeItem(key)

    document.getElementById('remove').onclick = function () {
        sessionStorage.removeItem('name')
        sessionStorage.removeItem('age')
    }

全部删除 sessionStorage.clear()

    document.getElementById('clear').onclick = function () {
        sessionStorage.clear()
    }