sessionstorage,localstorage的异同点及

sessionstorage和localstorage都属于html5的webstorage范畴，两者的出现克服了cookie带来的一些限制，当数据需要被严格限制在客户端时，不需要持续的将数据发送给服务器。

webstorage的两个主要目标

1. 提供一种在cookie之外存储会话数据的一种途径
2. 提供一种可以存储大量跨会话存在数据的机制

webstorage提供了两种api：localstorage和sessionstorage

1. 生命周期

localstorage的期限是永久的，关闭页面或者浏览器之后也不会消失。localstorage除非使用localstorage.removeItem()移除，否则会一直存在。

sessionstorage是仅在当前会话下有效，它引入了一个浏览器窗口的概念，只要这个浏览器窗口没有关闭，而是刷新或者进入了另一个同源页面，sessionstorage都不会消失，但是在关闭了浏览器窗口之后就会被销毁，同时独立的打开同一个窗口同一个页面，sessionstorage也是不一样的

2. 存储大小

两者的存储最大数据大小一般都是5MB

3. 存储位置

都保存在客户端，不与服务端进行通信

4. 存储内容类型

一般都只能保存字符串类型，对于复杂对象可以采用json的stringify和parse方法来做处理

5. 获取方式

window.localstorage和window.sessionstorage

6. 应用场景

localstorage常用于长期登录（+判断用户的登录状态），适合长期保存在本地的数据

sessionstorage常用于敏感账号一次性登陆，如关闭当前页面再次打开页面就要重新登陆

webstorage的优点：

1. 存储空间更大

cookie为4KB，而webstorage为5MB

2. 节省网络流量

不用像cookie一样每次请求都要传送到服务器，减少了客户端和服务器端的交互，节省了网络流量

3. 对于那种用户浏览一组页面之后关闭浏览器数据就被丢弃的场景，sessionstorage很方便

4. 快速显示

从客户端本地取数据要比从服务器取快

5. 安全性

webstorage不用像cookie一样传送到服务器，避免被截获，但是仍然存在伪造问题

6. WebStorage提供了一些方法，数据操作比cookie方便；

              setItem (key, value) ——  保存数据，以键值对的方式储存信息。

      　　 getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

        　　removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        　　clear () ——  删除所有的数据

        　　key (index) —— 获取某个索引的key

部分知识点参考自：https://www.cnblogs.com/cencenyue/p/7604651.html