什么是localstorage
前几天在老项目中发现有对cookie的操作觉得很奇怪，咨询下来是要缓存一些信息，以避免在URL上面传递参数，但没有考虑过cookie会带来什么问题：
【1】cookie大小限制在4k左右，不适合存业务数据
【2】cookie每次随HTTP事务有一起发送，浪费带宽
localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输，但也不是没有问题：
【1】localstorage 大小限制在500万字符左右，各个浏览器不一致
【2】localstorage 在隐私模式下不可读取
【3】localstorage 本质是读写文件，数据多的话会比较卡
【4】localstorage 不会被爬虫爬去，不要用它完全取代URL传参
瑕不掩瑜，以上问题皆可避免，所以我们的关注点应该放在如何使用localstorage上，并且是如何正确使用
localstorage的使用
基础知识：
localstorage存储对象分为两种：
【sessionStorage】 session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。
【localStorage】将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。
两者区别就是一个作为临时保存，一个长期保存。
localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法：
【1】setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例
【2】getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例
【3】removeItem删除key
用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例
【4】clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代码示例
【5】其他操作方法：点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：
【6】localStorage和sessionStorage的key和length属性实现遍历
【7】storage事件
storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：
这里来一段简单的代码说明其基本使用：
定义基本样式结构
index.js
效果测试
真实场景
实际工作中对localstorage的使用一般有以下需求：
① 缓存一般信息，如搜索页的出发城市，达到城市，非实时定位信息
② 缓存城市列表数据，这个数据往往比较大
③ 每条缓存信息需要可追踪，比如服务器通知城市数据更新，这个时候在最近一次访问的时候要自动设置过期
④ 每条信息具有过期日期状态，在过期外时间需要由服务器拉取数据
.......
应用场景
有了对上面这些差别的直观理解，我们就可以讨论三者的应用场景了。
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。
针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。
曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~
而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。
如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
安全性的考虑
需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。
因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
閱讀更多 JS加加網 的文章
