## 前言 也许你已经使用过cookie,session，但有可能不了解其原理以及特性，andweb存储还有其他的方案，通过该文档你将获知所有的web存储类型各自的语法以及特征。 ## cookie ### 描述 * 一般情况下只有用户的token会保存到cookie中，其他的保存到会话中即可。 * 大小限制只有4k * 一般情况下不建议放大数据，因为这部分会随着http交互传接，影响性能 * 一般情况下存储的是纯文本，对象需要序列化之后才可以存储，解析需要反序列化，其中最常见的是json的对象以及字符串的互相转换。 * 最早作为http拓展协议的一部分，是指web浏览器存储的少量数据。 ### 原生方法 请参考js-js常用技术-jscookie的自定义方法，你将获得setCookie(name, value)；delCookie(name)；getCookie(name)三个基本方法。 ### js封装方法 github地址：https://github.com/js-cookie/js-cookie<br> 直接引入：<script src="/path/to/js.cookie.js"></script> 基本语法： * 创建： Cookies.set('name', 'value'); * 创建7天有效期： Cookies.set('name', 'value', { expires: 7 });; * 创建指定路径有效的： Cookies.set('name', 'value', { expires: 7, path: '' }); * 读取单独：Cookies.get('name'); // => 'value'; * 读取所有：Cookies.get(); // => { name: 'value' }; * 删除指定： Cookies.remove('name');// => true 错误的返回false ### jq封装方法 github地址：https://github.com/carhartl/jquery-cookie<br> 直接引入：<script src="/path/to/jquery.cookie.js"></script> 基本语法： * 创建： $.cookie('name', 'value'); * 创建7天有效期：$.cookie('name', 'value', { expires: 7 }); * 创建指定路径有效的：$.cookie('name', 'value', { expires: 7, path: '/' }); * 读取单独：$.cookie('name'); // => "value" * 读取所有：$.cookie(); // => { "name": "value" } * 删除指定：$.removeCookie('name'); // => true 错误的返回false ## webStroage * 描述 在window对象上定义了两个属性，分别是localStroage,以及sessionStroage,这两个属性都代表同一个Stroage对象，一个持久化的关联数组。 * 语法（localStroage,以及sessionStroage语法公用的） ~~~ var name=localStroage.username; name=localStroage["username"];//等同于数组的表示法 if(!name){ name=promt("what is your name"); localStroage.username=name; } //迭代读取存储 for( var name in localStroage){ var value=localStroage[name]; } ~~~ * 存储api ~~~ setItem(name,value) getItem(name) removeItem(name); clear() //清除所有 ~~~ ## localStroage * 描述 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 * 作用域 作用域限定在文档源，文档源通过协议，主机名以及端口确定的；也受浏览器厂商的限制 * 有效期 永久性的，除非应用特意删除，否则一直保存在用户的电脑上，永不过期 ## sessionStroage * 描述 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储 * 作用域 与localStroage基本相同，并且不同标签页的数据也是不可公用的 * 有效期 顶层窗口的标签页，关闭就失效，如果一个页面有两个并列的iframe，那么这两个是可以互相通讯的。 ## 对比 Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。 ## 其他 ### 用户缓存的更新 ### 离线的web应用