前端本地缓存

HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。

localStorage提供了几个方法:

1、存储：localStorage.setItem(key,value)

如果key存在时，更新value

 

2、获取：localStorage.getItem(key)

如果key不存在返回null

 

3、删除：localStorage.removeItem(key)

一旦删除，key对应的数据将会全部删除

 

4、全部清除：localStorage.clear()

某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

 

5、遍历localStorage存储的key

.length 数据总量，例：localStorage.length

.key(index) 获取key，例：var key=localStorage.key(index);

 

6、存储JSON格式数据

JSON.stringify(data)  将一个对象转换成JSON格式的数据串,返回转换后的串

JSON.parse(data) 将数据解析成对象，返回解析后的对象

 

备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

 

 

 存储JSON对象的方法：

1. //以上即为localStorage调用的方法。下面介绍存储JSON对象的方法。  
2. var students =   
3. {  
4.     liyang:{name:"liyang",age:17},  
5.   
6.     lilei:{name:"lilei",age:18}  
7.   
8. }//要存储的JSON对象  
9.   
10.   
11. students = JSON.stringify(students);//将JSON对象转化成字符串  
12.   
13. localStorage.setItem("students",students);//用localStorage保存转化好的的字符串  

 

取回JSON对象的方法：

1. //上面即可保存JSON对象，接下来我们在要使用的时候再将存储好的students变量取回  
2.    
3. var students = localStorage.getItem("students");//取回students变量  
4.    
5. students = JSON.parse(students);//把字符串转换成JSON对象  
6.    
7. //以上即可得到存储的students的JSON对象了 

分类: WEB开发资料记录