HTML 之 localStorage、sessionStorage

localStorage、sessionStorage

localStorage、sessionStorage区别

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

• cookies的大小限制在4kB，不适合大量的数据存储。
• 浏览器还限制站点可以在用户计算机上存储的cookies的数量。
• cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。
• HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，HTML5的web提供了两种客户端存储方式。
• localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。
• sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
  

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不能被爬虫抓取到

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

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性：

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }

写入有三种方法:

			var storage=window.localStorage;
            //1.
            storage["a"]=1;
            //2.
            storage.b=1;
            //3.
            storage.setItem("c",3);

		    var ss = window.sessionStorage;
		    ss.setItem("d",2);
		    ss.e = 2;
		    ss["f"] = 2;

读取有三种方法:

 	console.log(storage["a"]);
 	console.log(storage.b);
	console.log(storage.getItem("c"));

官方推荐的是getItem\setItem这两种方法对其进行存取

	if(!window.localStorage){
	      alert("浏览器支持localstorage");
	  }else{
	      var storage=window.localStorage;
	      //写入a字段
	      storage["a"]=1;
	      //写入b字段
	      storage.b=1;
	      //写入c字段
	      storage.setItem("c",3);
	      console.log(storage.a);
	      // console.log(typeof storage["a"]);
	      // console.log(typeof storage["b"]);
	      // console.log(typeof storage["c"]);
	      /*分割线*/
	      storage.a=4;
	      console.log(storage.a);
	  }

localStorage的删除

//将localStorage的所有内容清除
		 var storage=window.localStorage;
         storage.a=1;
         storage.setItem("c",3);
         console.log(storage);
         storage.clear();
         console.log(storage);
 //将localStorage中的某个键值对删除
		 var storage=window.localStorage;
         storage.a=1;
         storage.setItem("c",3);
         console.log(storage);
         storage.removeItem("a");
         console.log(storage.a);
 //localStorage的键获取、
 		var storage=window.localStorage;
        storage.a=1;
        storage.setItem("c",3);
        for(var i=0;i<storage.length;i++){
            var key=storage.key(i);
            console.log(key);
        }

注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

		if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

			var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

打印出来是Object对象

https://www.cnblogs.com/st-leslie/p/5617130.html