Websql

一、背景介绍第一个Web存储的技术叫做Cookie，它是网站的身份证。是网站为了辨别用户身份，进行session（服务端的session）跟踪而存储在用户本地终端上的数据，也就是说它是存在电脑硬盘上的，一个很小的txt类型的文件。Cookie每次都会跟随http请求发送到服务端，也就是说每一个http请求都会带上我们的cookie数据，因此它存在一个安全性的问题。 cookie本身也是有很大的局限性的，首先它很小，主流的浏览器最大支持 4096 字节，除了最大字节的限制，每个网站的cookie个数（也就是每一个first每一个域）也是有限制的，一般浏览器是20个。除此之外，cookie还会默认跟随所有http请求发送，即使不需要使用这个cookie来鉴别用户但是它也是会跟随http请求发送的，这样就会造成一个网络资源的浪费。然后部分的浏览器还限制了总的cookie个数300个。在cookie的诸多局限性下，Web Storage应运而生。Web Storage 解决了很多问题：比如它支持存储大量数据，支持复杂的本地数据库，而且也不会默认跟随http请求。Web Storage主要是有四个： SessionStorageLocalStorageWebSQLindexedDB二、Cookie的简单介绍 Cookie是HTML4的一个标准，它一般不需要考虑兼容。它是网站的一个身份证，服务器可以针对不同用户，做出不同的响应。cookie存储在用户的机器上是一个纯文本，就是一个txt文件并不是一个脚本，它不能执行东西只负责记录。浏览器每次请求都会带上当前网站的cookie。 Cookie分为两种类型，一种呢是会话cookie，也就是临时性的cookie，退出浏览器或者是关闭即删除；另一种叫持久cookie，它会一直存在，存在的时间由特定的过期时间或者是有效期来决定。 Cookie的域 Domain决定了当前的一个cookie的权限，哪一个域可以使用这个cookie。 Cookie的路径 Path，下面一个简单的例子： www.baidu.com id="123456" domain="www.baidu.com"www.baidu.com/user id="123456" user="eric" domain="www.baidu.com" path="/user/"www.baidu.com/search id="123456";www.baidu.com/user/search id="123456" user="eric";如上www.baidu.com设置了一个id等于123456，domain是www.baidu.com，然后另外一个跟第一个一样多设置了一个user，id相同，但是多了一个user=“Eric”，它的domain设置成了www.baidu.com，path就到了user下面。这两者设置完成之后，当我们访问www.baidu.com/search时百度只能拿到id，因为user="Eric"是属于user这个域下面的，也就是说在search下面是获取不到的，但是在www.baidu.com/user/search这个时候我们就可以获取到名叫Eric的user。Path也是一种权限的控制只是相较于域domain是低一级的。 Cookie的安全secure，如果这个属性为TRUE，那么网站只有在https的请求下面才会携带当前的cookie。 Cookie的HttpOnly这个属性如果为TRUE，那么就不允许JavaScript操作cookie。因为cookie是存储在客户端一个独立的文件，因此服务器是无法分辨用户和攻击者的。关于cookie的目的分为两种：一种是跨站点脚本攻击，一种是跨站请求伪造。三、SessionStorage key-value的键值对，是HTML5新增的一个会话存储对象。 SessionStorage是临时保存在同一窗口，也就是同一标签页的数据。如果当前标签页关闭了，那么SessionStorage也就失效了。这也是SessionStorage最显著的一个特点：单页标签限制。除此之外，它还有的一些特点有：同源策略，也就是在同一协议，同一主机名和同一端口下的同一tab只在本地存储，不会跟随http请求发送到服务器存储方式采用key-value键值对，这里面的value只能存字符串类型，如果存其他的会自动转换成字符串。存储上线限制达到了5MB，如果当前存储超出上限新的内容会把旧的内容覆盖但不会报错。属性： sessionStorage.length - 键值对数量sessionStorage.key(int index) -> nullsessionStorage.getItem(string key) -> nullsessionStorage[string key]sessionStorage.setItem(string key, string value)sessionStorage.removeItem(string key)sessionStorage.clear()Json对象 JSON.stringify()JSON.parse()四、LocalStorage LocalStorage也是在浏览器的Application下面有一个Local Storage，它和SessionStorage是十分相似的，同样是key-value键值对，也是HTML5的新增存储对象，它与SessionStorage的特点不同之处在于没有标签页的限制和在浏览器的无痕模式下LocalStorage是不允许读取的，永久性的存储，然后SessionStorage超出限制是覆盖不会报错而LocalStorage超出会报错。特点：同源策略，也就是在同一协议，同一主机名和同一端口下的同一tab没有标签页的限制只在本地存储，不会跟随http请求发送到服务器存储方式采用key-value键值对，这里面的value只能存字符串类型，如果存其他的会自动转换成字符串。存储上线限制达到了5MB，如果当前存储超出上限会报错。无痕模式下不可读取永久性存储属性： sessionStorage.length - 键值对数量sessionStorage.key(int index) -> nullsessionStorage.getItem(string key) -> nullsessionStorage[string key]sessionStorage.setItem(string key, string value)sessionStorage.removeItem(string key)sessionStorage.clear()注意事项：LocalStorage和SessionStorage在web view是不可靠的，web view指的是在开发混合APP的时候使用了浏览器来实现我们的APP，这个时候是不可靠的，因为在浏览器崩溃的情况下数据可能没有存进去。另外一个在IOS浏览器中不可重复setItem，如果重复会报错，然后这个时候我们需要先removeItem再添加item。监听storage的变化监听storage包括SessionStorage和LocalStorage。然后这里需要提到两个概念：同源和监听同源网页。同源：协议、域名、端口三者相同，同源的情况下我们可以共享SessionStorage和LocalStorage。同源策略还禁止不同源执行任何脚本。 http://localhost:63342/simpleApp/app/index.html#/(协议) (域名) (端口) (路径)监听同源网页，但是同一网页是无效的 ...