H5本地存储

1. “text/javascript”>  
2.   
3.     localStorage.setItem(“coffeeType”, “mocha”);  
4.     localStorage.setItem(“coffeePrice”, “28”);  
5.   
6.     verify();   //验证本地存储  
7.     localStorage.removeItem(“coffeeType”);  
8.     verify();   //验证coffeeType是否存在  
9.     localStorage.clear();  
10.     verify();   //验证coffeeType和coffeePrice是否存在  
11.   
12.     //自定义验证函数，验证coffeeType和coffeePrice的数据是否存在  
13.     function verify(){  
14.         var type = localStorage.getItem(“coffeeType”);  
15.         var price = localStorage.getItem(“coffeePrice”);  
16.         type = type nbsp;type : ‘不存在’;  
17.         price = price nbsp;price : ‘不存在’;  
18.   
19.         alert( “coffeeType: “ + type + “nn” + “coffeePrice: “ + price );  
20.     }  
21.   

如果上面代码执行后弹出框提示不存在的话，那么意味着本地不支持H5的 localStorage 本地存储。那么不支持怎么办，DON’T 担心，可以写一段代码来兼容使用，请继续看下去。

2、兼容使用：

在写兼容代码前，再来说一点关于Web Storage的内容，在Web Storage的两个类中，我们比较常用的是localStorage类，至于session的话就交给后台去写吧。但是localStorage类在不支持H5的时候使用不了，所以我们将localStorage的四个函数封装一下，使得当浏览器或客户端不兼容localStorage时自动切换到Cookies存储。

首先，要写好一个操作cookie的类和函数，将四个函数的名字和参数还有功能和localStorage保持一致。正好，《JavaScript权威指南》第五版里已经写好了一个cookieStorage代码，但是呢，这段代码有BUG的，和稍微与localStorage不一致，所以我修改了一下，花了点时间造下轮子，代码如下：

（ cookieStorage.js ）

[javascript]  view plain  copy

1. //《JavaScript权威指南》一书中有实现基于cookie的存储API，我把代码敲下来  
2. // 另外，书中的代码有错，以下为无BUG版并修改成1000天相当长的存储时间  
3. window.cookieStorage = (new (

   声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！