localStorage，sessionStorage那些事儿

1、介绍

如W3Cschool介绍，localStorage和sessionStorage是H5新加的特性。

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

localStorage

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

而且解决了cookie存储空间不足的问题(存储空间约为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

 

localStorage优点

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

 

 

localStorage的局限性 

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

 

5、localStorage不能被爬虫抓取到

 

sessionStorage

 

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

 

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

 

localStorage和sessionStorage的存储，取值，删除等操作。

sessionStorage和localStorage用法一样。

值得注意的是，我在本地测试的时候，chrome浏览器第一打开窗口的时候，浏览器的localStorage和sessionStorage有内容，我刷新 就看不到内容了，但是存的东西确实存在的，能获取到，而在火狐浏览器里面不会出现这种情况，刷新网页内容不会丢，有毒了。

跪求（膝盖奉上）指点。

 

　　　　　　　// var localStorage = window.localStorage;
            // var sessionStorage = window.sessionStorage;
            //window对象的话，前面的window省略了哦
            //存localStorage
            localStorage.setItem('a', '1');
            localStorage.setItem('b', '2');
            localStorage.setItem('c', '3');
            localStorage.setItem('d', '4');
            //设置存储，名为a，值为5
            localStorage.e = 5;
            //获取全部键值，已经长度
            console.log(localStorage.valueOf());
            //按key进行取value值的三种方法
            console.log(localStorage.getItem('a'));
            console.log(localStorage.b);
            console.log(localStorage['c']);
            //获得数据的长度
            console.log(localStorage.length);
            //获得第N个数据的key名称
            console.log(localStorage.key(1));
            //删除单个key的value值
            localStorage.removeItem('a');
            //删除全部数据的value值
            localStorage.clear();

            //sessionStorage和localStorage
            sessionStorage.setItem('aa', '11');
            sessionStorage.setItem('bb', '22');
            sessionStorage.setItem('cc', '33');
            //获取全部键值，已经长度
            console.log(sessionStorage.valueOf());
            //按key进行取value值的三种方法
            console.log(sessionStorage.getItem('aa'));
            console.log(sessionStorage.bb);
            console.log(sessionStorage['cc']);
            //获得数据的长度
            console.log(sessionStorage.length);
            //获得第N个数据的key名称
            console.log(sessionStorage.key(1));
            //删除单个key的value值
            sessionStorage.removeItem('aa');
            //删除全部数据的value值
            sessionStorage.clear();

 

还要注意的是由于 localStorage 只能保存字符串内容，所以这里要先把对象转换成 JSON 字符串

　　　　　　　　// json对象
 2             // 由于 localStorage 只能保存字符串内容，所以这里要先把对象转换成 JSON 字符串
 3             //以上即为localStorage调用的方法。下面介绍存储JSON对象的方法。  
            var students = {
                    游晓伟: {
                        name: "游晓伟",
                        gender: "女",
                        age: 22
                    },

                    张宁: {
                        name: "张宁",
                        gender: "男",
                        age: 22
                    }

                } //要存储的JSON对象  


            students = JSON.stringify(students); //将JSON对象转化成字符串  

            localStorage.setItem("students", students); //用localStorage保存转化好的的字符串  
            var studentsVslue = localStorage.getItem("students");
            console.log(studentsVslue); //取回students字符串 

            studentsVslue = JSON.parse(studentsVslue); //把字符串转换成JSON对象  
            console.log(studentsVslue);

 

 

暂时就这么多，欢迎补充提问。