web数据存储的4种方法

概述

在说数据存储之前，我们先弄明白为啥要做存储，数据存储目的是为了减少网络资源的开销，提高客户端的性能和体验。通常利用存储来做一些登录信息的存储，静态资源的展示。客户端实现数据存储的方式也是多种多样的，像local storage，session storage，cookie，indexDB。下面我们来对比下他们的区别。

localstorage

local(本地的)storage(存储)，言下之意数据是存放在浏览器缓存文件下，和页面状态(打开，冻结，关闭)没半毛钱关系。就算怒关浏览器也无所畏惧。只有在手动清除缓存数据或文件才会被清除。缓存数据可以用storage的方法（setItem，getItem，removeItem）操作。那么storage缓存文件又放在那里呢？以chrome为例。在chrome地址栏输入chrome://version，此时看到一大堆chrome的版本信息。
接着找到个人资料路径，打开它

再接着在该目录下可以看到Local Storage这个文件夹，是的，chrome的local storage 数据就放在这里

每当我们操作local storage的数据时，chrome就会在数据文件中插一条与当前域名绑定的数据。

虽说是本地缓存，但local storage的数据和域名是一一对应的(同源)，就是说不能够跨域去取得这些数据。

另一个要关心的是local storage能够存储的数据量。官宣是5M，我们也可以拿每个1M的字节量量测试一下

在这里我们在同一个域名下插入6条，每条的量大概是1M，当插入到第6条时，看样子是进去了，接着把界面切换一下再回去，只剩下5条数据。5 * 1M = 5M。当然，这只是针对一个域名下，若切换到另一个域名，则重新计算。

local storage 的用法也很简单

localStorage.setItem(key,value) // 设置一对键值
localStorage.getItem(key) // 获取键为key的storage
localStorage.removeItem(key) // 移除建为key的storage

sessionstorage

session(会话)storage(存储)，会话也很好理解，即在交流通信时候的缓存。打个比方，当我们在谈钱的时候，这个对话里面是饱含着我们的深厚感情的，当谈钱结束后，甚至你是谁我都得好好想一下。
当打开了一个页面之后，这个页面就处在一个会话阶段，这时候session storage会陪伴你左右，此时你们感情暧昧着，直到创建该页面的标签关闭，session storage就被清除了，就像它从未认识你一样。
同样的，session storage也是和域名一一对应的。而关于它的存储量也是去到 5 M左右*(chrome)*

session storage 的用法也很简单

sessionStorage.setItem(key,value) // 设置一对键值
sessionStorage.getItem