一、localStorage简介:
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势与局限:
优势:
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
局限:
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
三、localStorage的使用:
localStorage是html5的新特性,所以并不是所有的浏览器都支持,因此在使用localStorage时需要先判断浏览器是否支持localStorage。
下面这段代码就是用来判断浏览器是否支持localStorage
localStorage
既然localStorage是用来存取数据的,那我们先从localStorage存数据开始说起
localStorage
上面的代码我们在localStorage中存取了一个字段a,值是"我是a"
localStorage支持多种存取值的方式,我们一一来看一下
localStorage
上面介绍了localStorage存值与取值的三种方式,具体用哪种方式都可以,其中官方推荐的是getItem\setItem这两种方法对其进行存取
那么数据存放进去我们如果想要修改该怎么办?别急,看下面代码:
localStorage
localStorage的删除:
1、清空localStorage:调用localStorage的clear方法将清空localStorage中的所有内容
localStorage
2、删除某个值:调用localStorage的removeItem()方法删除某个值
localStorage
localStorage的键获取
localStorage
四、localStorage的注意事项:
1、localStorage中存放的是String类型的值
localStorage
我们看到上述代码打印的结果为string,虽然我们存放的是int类型的值,但是localStorage还是把它当做string类型来存放
2、如果我们需要将JSON格式的数据存放到localStorage中,则需要借助JSON.stringify()这个方法,来将JSON转换成为JSON字符串
localStorage
读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法
localStorage