Web存储

    <button>存储信息</button>
    <button>获取信息</button>
    <button>删除信息</button>
    <button>key()</button>
    <button>存储引用数据</button>
    <button>获取引用数据</button>

<script>
        var btn = document.querySelectorAll('button');
        //存储信息
        btn[0].onclick = function () {
            localStorage.setItem('name', '张三');
            localStorage.setItem('age', 24)
            sessionStorage.setItem('name', '李四')
            // console.log(localStorage.length);
        }
        //获取信息
        btn[1].onclick = function () {
            console.log(localStorage.getItem('name')); 
            console.log(localStorage.getItem('age'));
            console.log(sessionStorage.getItem('name'));
        }
        //删除信息
        btn[2].onclick = function () {
            localStorage.removeItem('name')
            sessionStorage.removeItem('name')
        }
        //删除所有数据
        // localStorage.clear();
        // sessionStorage.clear();
        btn[3].onclick = function () {
            console.log(localStorage.key(0));
        }

        // 二者相同点:
        // 设置,读取操作方便.
        // 都有同源策略限制,跨域无法访问
        // 容量较大,sessionStorage约5M,localStorage约20M不同浏览器大小可能有差异
        // 均只能存储字符串类型的数据
        // 如果存储内容多的话会消耗内存空间,会导致页面变卡
        // 不同点:
        // 生命周期不同.
        // sessionStorage存储的数据在当前标签页或浏览器被关闭时会清空
        // localStorage存储的数据除非用户手动删除,否则是一直存在的
        // 共享区间.
        // sessionStorage：仅在当前标签页内共享,即当前页面和它内部的窗口共享存储的数据
        // localStorage：在同一浏览器下所有同源页面共享它存储的数据.
        // 如果我们在一个标签页面中更改了存储数据,则在另一个同源的标签页中也可以看到存储数据变化


        //存储 引用数据
        var user={
            name:'张三',
            age:24,
            role:'admin'
        }
        // 在存入数组或对象时,通过 JSON.stringify() 方法将其转换回字符串,
        // 在取出的时候通过 JSON.parse() 方法再将其转化回来,我们就可以得到原来的数据了.
        btn[4].onclick=function(){
            localStorage.setItem('userinfo',JSON.stringify(user));
        }
        btn[5].onclick=function(){
            var str = localStorage.getItem('userinfo')
            console.log(JSON.parse(str));
        }
    </script>