Web客户端储存Storage

Web客户端储存Storage

前言:
这里有我写的一个小案例：Storage-demo
大家如果喜欢的可以clone，fork 最好能收藏一下。

Web Storage出现是为了客服cookie带来的一些限制，当数据需要被严格控制在客户端山过得时候，无需持续的将数据发回服务器—《JavaScript高级程序设计》

applicationCache对象可以查看页面是否有缓存

cookie

这里我们了解一下cookie，现在cookie是客户端储存数据的一种方式

HTTP cookie 是客户端用于储存会话信息的

当服务器对任意HTTP发送请求的时候,Set-Cookie-HTTP会作为响应头的一部分发送

HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie: name=newValue
………………

HTTP响应设置以name=value来返回,name value 都必须是URL编码,而且为了不让人恶意使用cookie，每个域名的cookie数量是有限的，所以cookie实际能储存的东西很少.

GET /index.html HTTP/1.1
Cookie: name=value
……

获取设置cookie

var cookie = document.cookie

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("value")

Storage

Storage提供了比cookie更大的储存空间来储存键值对,但是不同的浏览器实现大小不同。在控制台上打印Storage是挂载在window上的一个构造函数。而我们之后说的localStorage、sessionStorage、globalStorage的属性都是它的实例,都可以使用其方法。

重点:Storage类型只能储存字符串,所以数据传入必须要转换为字符串

Storage

一、Storage方法

这些方法都挂载在Storage.prototype

• clear() 删除所有值,Firefox没有实现
• getItem(key) 根据指定的名字来获取对应的值
• setItem(key,value) 为指定的名字设置对应的值
• removeItem(key) 删除指定名字的的键值对
• key(index) 获取指定索引的key(也就是名字)
• length 判断Storage对象的数量

localStorage.setItem("name","John")

建议使用方法而不是属性,以免某个键会被意外的重写该对象已存在的属性

二、sessionStorage对象

sessionStorage是储存在某个特定的会话的数据,他只能保持到浏览器关闭,之后就消失了。(刷新页面数据不会消失,关闭页面数据就消失了)

应用:只针对会话的小段数据存储

三、globalStorage对象

globalStorage可以跨越会话储存数据，但是会有访问限制。访问针对域名的储存空间.

注意：globalStorage本身不是Storage对象,他的所有属性才是Storage对象

globalStorage["www.baidu.com"].name = "王某某"

var name = globalStorage["www.baidu.com"].name //获取数据

四、localStorage对象

localStorage可以持久保存客户端数据,页面必须是统一域名(子域名无效)，同一协议，同一端口相当与globalStorage[location.host]。也是我现在很常用的Storage对象

使用方法和sessionStorage相同,因为都是Storage的实例。

兼容只支持globalStorage的浏览器

function getLocalStorage(){
  if (typeof localStorage == 'object'){
    return localStorage
  }else if (typeof globalStorage == 'object'){
    return globalStorage[location.host]
  }else{
    throw new Error ("Local Storage not avalable")
  }
}

遍历localStorage所有的键值对，可以用key来迭代localStorage中的值，也可以用for-in循环

var key, i, arr=[]

for (i = 0; i < localStorage.length ;i++){
  var key = localStorage.key(i);
  var value = localStorage.getItem(key)
  arr.push({key:value})
}

for (key in localStorage){
  var value = localStorage[key]
  arr.push({key:value})
}

五、Storage事件

• domain 发生变化的储存空间的域名
• key 设置删除的键名
• newValue 如果是设置值,则是新值。如果是删除值,则为null
• oldValue 键更改之前的值

EventUtil.addHandler(document, "storage", function(event){
  console.log(event.demain)
})

总结:

1. cookie有许多限制储存空间小,现在我们可以更多的用storage来储存客户端的数据
2. Storage类型只能储存字符串
3. sessionStorage他只能保持数据到浏览器关闭,localStorage可以持久的保存客户端数据