在浏览器客户端记录一些信息，有三种常用的web数据持久化存储的方式，分别是web sql、local storage、cookies。
web sql
作为html5本地数据库，可通过一套api来操纵客户端的数据库（关系数据库），下面是支持浏览器情况。
鉴于pc浏览器支持情况，我找了淘宝、京东、携程、起点、优酷网站，并没有用web sql记录客户端信息。在移动端比较适用，特别是对于hybrid应用，更是得心应手。
接口：
opendatabase
transaction
executesql
1.打开连接并创建数据库
2.创建数据表
3.添加数据
4.查询数据
特点：
1.有事务
2.查询数据，返回数据类型正确
3.被w3c丢弃的规范，但被广泛支持。
local storage
html5提供了没有时间限制在客户端存储数据的手段，以键值对存取，网站只能访问其自身的数据，浏览器支持如下。
ps：截图来自网上资料
有个比较有趣的东西，我在起点、京东、优酷的localstorage找个共同的变量，就是jw_bl，里面的数据是（我猜不到这个属性是什么简写的）：
写数据：
读数据：
ps：要注意的是，获取localstorage的值是字符串，不管你赋值的是什么类型。
1. 获取值是字符串类型
2. 容量有大约5m限制
3. 不会进行网络传输
cookies
cookies是最常用的web数据持久化手段，所有浏览器都支持。cookie是由服务器端生成，发送给user-agent（一般是浏览器），浏览器会将cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该cookie给服务器（前提是浏览器设置为启用cookie）。单点登录（sso）是个很经典的使用。
ps：当然也可以在网页设置cookies
cookie数量和长度的限制
每个domain最多只能有20条（某些浏览器会多一些）cookie，每个cookie长度不能超过4kb，否则会被截掉。
cookie生命周期
cookie在生成时就会被指定一个expire值，这就是cookie的生存周期，在这个周期内cookie有效，超出周期cookie就会被清除。将cookie的生存周期设置为“0”或负值，就马上清除cookie。
cookie安全性问题
如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。或者是可收集这些信息做一些事。
cookies请求附带
cookies每次请求会被发送到服务器，占用额外带宽，示例参数如下（截了一个斗鱼网站请求的图）。
ps：cookies参数需要使用抓包工具（类似fiddler）才能看到，chrome开发者调试工具看不到的。
cookies的javascript编程
下面代码来自网上资料：
创建cookies：
取值cookies：
删除cookies：
清除所有cookies：
因为cookies值可能存在“;=”字符，所以清除的函数还没一那么简单，要照着自己工程看着写。
总结
web sql一般在移动端使用，localstorage pc和移动端都适用，而cookies是所有持久化存储支持最好的。可根据它们本身的特性选择自己需要使用的方式。
本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。
转载：http://www.cnblogs.com/lovesong/p/4976233.html