LocalStorage & SessionStorage

​Localstorage 和 SessionStorage 是Html5的一个新特性,属于Html5里的本地离线存储。

​在讨论这两个之前我们先科普一下关于html5相关知识。

科普Html5

​ 其实我们都知道HTML是一种标记语言,属于SGML的一种,但是HTML5已经不属于标记语言【SGML】的范围内了,在近几年HTML5出现之后,本身自己添加了不少的功能。 ​ HTML5新增的功能:

  • 画布绘画标签 canvas;
  • 媒体流标签 video 和 audio (视频和音频);
  • 本地离线储存 localStorage 和 sessionStorage;
  • 更语义化的元素 例如footer、header、article等等;
  • 表单控件: time、email、url、date等等;
  • 新技术:websocket(实时通信)、webWorker(针对js主线程另开一个线程)、geolocation(地理位置对象);

​ 在对于HTML5的支持肯定,各个厂商的浏览器支持是不一样的,我们可以从下面表看一下。 ​ HTML5的表单控件: ​ ​ HTML5的新语义化元素: ​ ​ HTML5的video标签: ​ 看了一些浏览器的兼容的情况之后,接下来就是看一下关于浏览器存储的兼容: ​ Web Storage:
可以看出还是存在bug的,尤其是IE浏览器和IOS。 ​
QQ浏览器 ​ 这里说多一句,基于现在微信流量吓人的时代,开发的相关很多网页大多是都是放在微信内置的浏览器打开的,也就是QQ浏览器,而QQ浏览器之前是双核浏览器,也就是2个内核,即Webkit和Trident双内核,Chrome和IE浏览器分别使用的内核,但是细分的话,Webkit是谷歌开源的内核Chromium(),而不是 Google 代表色的(),简单来说,QQ浏览器是基于Chromium开发,针对IE内核优化。 ​ 所以也可以看做是chrome浏览器一类,然后去兼容IE的弊端,一听就很霸气,哈哈,当然也可以使用官方的开发者工具开发,毕竟是官方的,真机模拟和实际真机问题不大。

HTML5 和 H5 的区别?

​ 这个问题在知乎已经有很多人做了回答,可以点击下面的链接: ​ 知乎链接:https://www.zhihu.com/question/30363342 ​ ​
其实在H5刚出来的时候,身边是一股潮流风,被其他营销手段,吹的天花乱坠,还有的是说某大学生,用H5制作软件制作了一个企业H5,赚了上百万…….人人跟风,以为是新东西,感觉是掌握了H5就掌握了世界的感觉。当时大二的时候还有一个找我做H5的,说要做一个这样的东西,你只需要什么什么就行….然后就没了,途中有试过解释什么是H5是一个技术集合,如果你想要这样拖拉一下组件,加加文字,你直接可以去用易企秀、Maka类似的H5制作软件就行了…. ​ 其实跟不跟风这回事….你可以上网查一下,就可以对H5有一个大概的了解。 ​


所以在我看来,HTML5 和 H5 ,角度不一样,说法就不一样,营销、技术的角度不一样,说法就不一样,如果真想来了解两者的对比,可以看一下我放的链接,里面说的很清楚了,但是,我想说的是,在一件新事物出现之后,我们应当先冷静一下,看看它究竟是什么,适用在什么场景,再去学习理解,化为己用。 ​ 做项目的时候,也有技术选型嘛,道理是一样的。 ​ 前端娱乐圈发展快,越快越需要自己冷静下来,看个究竟,再做选择。

回归主题,基本概念

LocalStorage:

​ Html5的新特性,本地存储的长期存储,当浏览器关闭数据不会丢失。​ ​ 大小一般是5M左右,方便存储大量的信息,但是最好不要在本地浏览器存储敏感信息。 ​ 数据格式是以键值对存在,即 key — value

LocalStorage使用方法:

1
2
3
4
5
6
7
8
9
10
11
//设置本地LocalStorage数据;
LocalStorage.setItem(key, value)

//获取本地LocalStorage数据 key相对应的value;
LocalSrorage.getItem(key)

//本地LocalStorage数据 根据key移除;
LocalStorage.removeItem(key)

//本地LocalStorage数据 全部移除
LocalStorage.clear()

​ 有写demo代码:

可以在打开的浏览器看到: ​
​ ​
可以看到浏览器里的 Application 控制面板,可以看到对应的web存储,红线框即是。 ​ 在这里有个动效就是,当你点击按钮的时候,里面的名字是会改变成,存储在localStorage里的value。 ​

SessionStorage:

​ 也是Html5的新特性,本地存储的暂时性存储,不会被长期存储,当浏览器或者当前窗口被关闭时,sessionStorage存储的数据也会被清除。数据格式和用法和LocalStorage都很像。 ​ 数据格式是以键值对存在,即 key — value 。

SessionStorage使用方法:

1
2
3
4
5
6
7
8
9
10
11
//设置本地LocalStorage数据;
SessionStorage.setItem(key, value)

//获取本地LocalStorage数据 key相对应的value;
SessionSrorage.getItem(key)

//本地LocalStorage数据 根据key移除;
SessionStorage.removeItem(key)

//本地LocalStorage数据 全部移除
SessionStorage.clear()

Localstorage 和 sessionStorage的作用域 其实在概念的时候,就会明白sessionStorage在当前窗口关闭的时候,里面的数据就会丢掉,LocalStorage是可以长期存储的,但是他怎么样存储起来的?这么多网站会不会搞乱? ​ 来张图: ​

可以在上图可以看到:

  • LocalStorage只有满足 协议 主机名 端口 ,才能辨别出到底是谁存储了这些数据;
  • SessionStorage则还要满足当前窗口才可以辨别;只有满足以上的作用域,才可以读取相对应的存储信息。

如何证明真的是这样的?

​ 我做了一个对于LocalStorage的一个存储例子。 ​ demo网址:

  1. http://www.wusiqing.com/webTest/localStorage/local_index.html

  2. http://www.wusiqing.com/webTest/localStorage/index.html

  3. http://wusiqing.com/webTest/testTest/index.html

​ 其中,第一,第二是同在LocalStorage文件夹下的,而第三个则不是。

对比一下第一、第三:

![]/static/images/2018-07-11-13/12.gif)

对比第一、第二

结论:

事实证明是除了在上面说的协议、主机名、端口之外,还要在同一资源下,即在同一个设置好LocalStorage文件的文件夹下的所有页面才会起作用。

随处可见的cookie

​ 在讲到本地存储的时候,除了LocalStorage和SessionStorage,肯定回想起来很熟悉的Cookie。

​ Cookie是什么?

cookie也是一个本地存储,是服务器发送给浏览器并保存在本地的一个4k数据信息,它会在下一次浏览器向同一服务器发送http请求的时候附带上,主要用来检验是否是同一信息。 简单来说,cookie由服务器发送,在http上传播,保存在本地浏览器中。

Cookie能干什么?

主要是存储信息,便于服务器和浏览器之间会话通信。 平时最常用的登录状态管理和之前购物车的使用都是基于cookie,后来购物车就可以使用localstorage来作为客户端的存储。 使用场景主要是:

  • 会话状态管理(登录、购物车等)

  • 个性化定制(用户自定义设置)

  • 用户行为信息

Cookie如何看到

控制台查看

可以直接在这里可以查看:

原生js API查看

可以使用 document.cookie (但是如果cookie设置了httpOnly属性,就无法使用js查看);

如下图:

Cookie的设置。

常规操作后端操作

cookie是由服务端设置的,然后发送到浏览器。 使用操作是: Set-Cookie: <cookie名>=<cookie值>

类似的如同在nodeJs上操作是:

使用响应属性去设置头部信息。

控制台操作

可以在各个浏览器的开发者工具中的 Appication标签可以看到,也可以直接进行修改。

原生js操作

原生js操作其实和控制台操作差不多,作为api,其实就是在操作浏览器的相关内容。 前面有说过,可以使用 document.cookie 进行查看当前浏览器的cookie,那么也是可以进行修改, 语法: document.cookie='<key>=<value>'

例如:

document.cookie='name=cqing';

Cookie属性

  • Domain 设置域名和主机名,表示要发送到哪个服务器。

  • path 设置路径,和Domain一起使用,表示发送到改服务器下的具体哪一个路径。

  • Expirse | Max-Age 设置过期时间,表示在这个时间之前是有效的。

  • secure 设置只有在安全协议之下cookie才可以被使用,默认为空。

  • httpOnly 设置能否使用js查看,默认为空。

除了以上说的三种方式之外,Html5还新增了关于本地数据库的功能.

在写的过程中,发现有点偏离主题,关于本地数据库操作,可以自行搜索相关的语言操作demo.

本地存储 SQLite

除了以上说的三种方式之外,Html5还新增了关于本地数据库的功能,但是本地数据库操作并不是Html5里面的新特性,只是一种借用了Sql对本地数据库操作的apis,即web SQLlite 和 Web indexedDB 。 其实web SQL现在chrome支持得更多,其他浏览器像IE、火狐等等的就不要支持了。

它的语法其实和sql语句差不多,详细可以自己了解一下,这里不做详细展示了。

看图

本地存储 web indexedDB

相对于web SQL ,web indexedDB更广泛被支持。

看图:

结语

在后面关于本地数据库操作介绍的有点简单,因为在写的时候,经常性会不自觉地想到很多,本来只想简单谢谢sessionStorage和localStorage这两个东西,但是后来不自不觉就写到了本地存储,也有另外相关知识的拓展和衍生,希望还是可以写一点这样子。

觉得不错的,可以点个赞,赞赞更有动力哈!