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使用方法：

//设置本地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使用方法：

//设置本地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网址：

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

对比一下第一、第三：

![]/blog/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这两个东西，但是后来不自不觉就写到了本地存储，也有另外相关知识的拓展和衍生，希望还是可以写一点这样子。

觉得不错的，可以点个赞，赞赞更有动力哈！