HTML_本地存储

在HTML5当中,新增了很多的存储方式,这里我先介绍两种,方便我们的使用和操作,具体新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题,localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。而这个localStorage在哪找到的呢?

如上图所示,我们可以通过浏览器的F12按钮打开控制台,接着点击Application,下面就有五个储存方式,当然,Cookies是我们之前所使用的,但是缺点是空间不够大,所以新增了其他的储存方式,这里我们主要讲的是localStorage,顺便把SessionStorage也说了。

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中的键值对会被清空

 

然后我们先来认识操作这个数据库的一下方法

  • 判断window是否支持localStorage
    • window.localStorage
  • 设置键值对
    • localStorage.setItem(key,val);
  • 获取值
    • localStorage.getItem(key);//只能输入键,获取值
  • 删除键值对
    • localStorage.clear();
  • 获取值
    • localStorage.key(i)
  • 访问页面次数
    • localStorage.pagecount

做了一个小小的实例:https://github.com/Itdansan/Storage 希望能帮助到大家(代码中相应的注释也标注了)

注释:sessionStorage和localStorage的区别仅仅是存储时间的问题,而功能,方法和实现原理,都和localStorage一样,因此,和localStorage的方法一样的!

 

(完)!

posted @ 2017-12-06 23:41  it蛋散  阅读(174)  评论(0编辑  收藏  举报