js本地储存

 <!-- webStorage:是浏览器端存储数据的一种前端技术，包含localStorage和sassionStorage这两个API -->

    <!-- localStorage:长期存储/本地存储，在浏览器中存储的数据会长期存在，除非手动删除，常用来存储网站的浏览历史，搜索历史，收藏，书签，某些网站账号等-->

    <!-- sassionStorage：会话存储/短期存储，浏览器窗口一旦关闭，则立即删除，常用来存储一些网页的登录状态 -->

 

    <script>

        // localStorage 和 sassionStorage都是 window的属性用于本地存储数据，api相同，数据存储位置和时间长短不同

       

        // 1.增 ，只能存字符串类型存储

        localStorage.setItem('name','张三')

        sessionStorage.setItem('age','20')

        var obj = {name: '李四'}

        sessionStorage.setItem('friend',JSON.stringify(obj))

        // 2.删，

        // localStorage.removeItem('name');//通过key删除

        // sessionStorage.removeItem('age');

        // sessionStorage.clear();//清空数据

        // 3.改  和增使用相同api，无此key则添加，有此key就添加

        localStorage.setItem('sex','true');

        localStorage.setItem('phone','110');

        sessionStorage.setItem('age',30)

        // 4.查

        console.log(localStorage.length);//查看数据长度

        console.log(sessionStorage.length);

        // 通过key值取出某一条数据

        console.log(localStorage.getItem('sex'));

        // console.log(localStorage.key())

        // 遍历取出所有个数

        for(var i = 0; i < localStorage.key; i++){

            var key = localStorage.getItem(key);

            console.log(localStorage.getItem(key));

        }

        // 为什么打开一个新的窗口，同一个网页，会话存储sessionStorage数据不一致？

        // 会话存储的数据是在窗口上存的，一个窗口对应一个sessionStorage作用域，对于不同的窗口即使是同一个网页，数据也不共用

        // 本地存储的数据是在域名（ip地址）下存的，一个域名网址对应一个localStorage作用域，对于同一个域名下的不同网页可以公用一个localStorage，不同域名下的localStorage相互隔离不通用

        // 总结:

        // 1.localStorage和sessionStorage区别主要在两点存储时间长短和存储作用域上

        // 2.api有:

        // setItem(),getItem(),removeItem(),clear(),key(),length

 

        // 补充：装箱和拆箱

        // 装箱：把值类型转换成引用类型的过程就叫装箱  JSON.parse()

        // 拆箱:把引用类型转化成值类型的过程,就叫拆箱  JSON.stringfy()