本地存储localStorage跟sessionStorage以及cookie使用总结

localStorage是HTML5新增的一个本地存储的属性,它可以把数据存储在浏览器,也就是存储在本地.

本地存储的优势是什么呢?

优势:
	  本地存储的优势就是可以把一些没有必要存储在服务器的数据存储到本地做一个本地缓存,这样做的好处就是减少了服务器
	  的资源请求压力.当你多次访问同一个网站的时候,你有一些已经做了本地存储的数据就没必要再通过网络请求来获取,
	  而是通过本地缓存.这样做不仅减少了服务器的压力也提高了性能.

	  数据存储的大小限制,相对于cookie中每条cookie的存储空间为4k的空间大小来说,localStorage的优势就明显很多了,
	  localStorage中一般浏览器支持的是5M左右,所以这个也就解决了一些数据存储空间不足的问题.

localStorage跟cookie的区别:

	1.localStorage的有效时间是无限的,这也是它跟cookie的一个区别.也就是说只要你自己不手动删除
	（包括自己清浏览器数据，自己写代码删除），它就会一直存在 .
	2.如果浏览器端存的是cookie，那么每次访问这个网站，都会自动把cookie发送给服务器,
	  而localStorage不会自动发送给服务器，除非你自己写代码取出来
	3.大小限制不一样,cookie的存储空间为4k,localStorage为5M左右

localStorage的几种用法:

第一种:存储数据

   //存储数据 :
   		localStorage.setItem('key','value');
        //参数1：key
        //参数2：value
        localStorage.setItem('name','jack');
        //在这里,如果需要存储数据的话只只要把key跟value写上去即可.

第二种:读取数据

//读取数据 :
		localStorage.getItem('key')
		//参数:key
 		var res = localStorage.getItem('name');
 		//如果需要读取数据的话只需要调用localStorage.getItem()这个方法然后写上需要查询的参数即可,
 		//但是有一个需要注意的地方是它读取回来的数据有返回值,所以需要声明一个变量来保存.

第三种:删除数据

		//删除某一条数据根据key来删
		localStorage.removeItem('key');
		//参数:key
        localStorage.removeItem('name');
        //如果要删除某一条数据的话只要调用这个方法然后传入参数即可

第四种:清空所有数据

		//清空所有数据
		localStorage.clear();
		//需要参数
		//这种方法也是删除数据的一种,不过这种方法是把所有数据都清空,而上面那种方法是把某一条数据给删除.

上面的方法只是存储一些简单的数据类型,如果要存储复杂类型的数据就要做一些转换.

	因为localStorage默认只能存储基本数据类型，如果传入的是复杂类型，它会先调用复杂类型的toString()方法，
	然后再存储,这样就会存在一些问题,所以如果要存储复杂类型数据的话就需要先把复杂类型转成JSON字符串再来保存,

利用localStorage存储复杂类型数据的基本用法

存储一个数组

		//声明一个数组
      var arr = [10,20,30,40,50]

       //先转成JSON再存储
       var json = JSON.stringify(arr);
       
       localStorage.setItem('arr',json);
       //存储复杂数据类型的方法跟简单数据类型的方法是相似的,只不过由于localStorage默认只能存储基本数据类型,
       //所以我们只需要在数据存储之前做一个数据格式的转化即可.

读取一个数组

		var res = localStorage.getItem('arr');
		//声明一个变量来接收返回值,这里这个步骤跟简单数据类型的操作是一样的.
	       var arr = JSON.parse(res);
	       //数据取出来后也要进行转换,这样就可以得到我们需要的数据了
    	      console.log(arr);
   

以上就是本地存储localStorage的基本使用方法.

sessionStorage也是本地存储的一种方法,甚至可以说是短命版的localStorage.为什么说它是短命版的localStorage的呢,因为它的用法跟localStorage是一模一样的,只不过它有生命周期,它的生命周期是一次会话(浏览器窗口的关闭即一次会话的结束).一般sessionStorage用于数据需要临时保存的地方,由于用法跟localStorage一模一样只是生命周期不用,所以就不再做过多演示.