HTML5本地存储详解.docVIP

HTML5本地存储详解 HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。 ?HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。 1、sessionStorage 检测 !!window.sessionStorage; 常用方法 .key = value .setItem(key,value) .getItem(key) .removeItem(key) .clear() [javascript]1.? window.sessionS = rainman;?????????? // 赋值???2.? window.sessionStorage.setItem(name,cnblogs);? // 赋值???3.? window.sessionStorage.getItem(name);??????????? // 取值???4.? window.sessionStorage.removeItem(name);???????? // 移除值???5.? window.sessionStorage.clear();??????????????????? // 删除所有sessionStorage??? 事件： window.onstorage 检测值得变化，浏览器支持不好。 说明： cookie的存储限制在了4k之内，相比来说，session storage有了更大的存储空间，但至于具体多大，这要参照浏览器厂商的具体实现。cookie有一个机制，就是在每次客户端请求服务器的时候都会将cookie发送给服务器，这无疑会做很多不必要的操作，因为并不是每次请求服务器都需要cookie的所有信息，而session storage很好的解决了这个问题，它不是采取自动发送的方式，这样就减少了不必要的工作。通过sessionStorage所存储数据的生命周期，和Session类似，关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。session storage每个窗口的值都是独立的（每个窗口都有自己的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不可以共享的。setItem中的key、value使用的是字符串的形式进行存储的。也就是说如果有如下的代码：setItem(‘count’, 1);通过getItem(‘count’) + 5 得到的将不是预期的6(整数)，而是’16’(字符串)。再次使用setItem设置已经存在的key的value时，新的值将替代旧的值。当存储中的数据发生改变时，会触发相应的事件（window.onstorage），但目前各浏览器对此事件的支持并不完善，暂时可以忽略。2、localStorage 检测 !!window.localStorage; 方法和sessionStorage相同 说明： local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。而且对于某一个域下来说，local storage是共享的（多个窗口共享一个“数据库”）。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。举例 [javascript]1.? //结合JSON.stringify使用更强大???2.? var person = {name: rainman, age: 24};???3.? localStorage.setItem(me, JSON.stringify(person));???4.? JSON.parse(localStorage.getItem(me)).name;??? // rainman???5.?????6.? /**?7.?? * JSON.stringify，将JSON数据转化为字符串?8.?? *???? JSON.stringify({name: fred, age: 24});?? // {name:fred,age:24}?9.?? *???? JSON.stringify([a, b, c]);?????????????? // [a,b