HTML5 本地缓存 (web存储)

简介:

首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和 sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者 用法完全相同,这里以localStorage为例。

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

 

存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

 

这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键,再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}


http://blog.sina.com.cn/s/blog_4515673f0100mm6m.html

http://www.w3school.com.cn/html5/html_5_webstorage.asp










本文转自 艺晨光 51CTO博客,原文链接:http://blog.51cto.com/ycgit/1857880,如需转载请自行联系原作者
目录
相关文章
|
28天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
26 0
|
28天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
29 0
|
16天前
|
JavaScript 前端开发 API
Web Components详解-HTML Templates
Web Components详解-HTML Templates
19 6
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
32 2
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
28 1
|
1月前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
25 1
|
1月前
|
存储 搜索推荐 数据库
Web实战丨基于Django与HTML的用户登录验证系统
Web实战丨基于Django与HTML的用户登录验证系统
31 1
|
20天前
|
监控 Python 缓存
缓存系统提升Web应用性能
【6月更文挑战第22天】
20 0
|
23天前
|
缓存
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
15 0
|
27天前
|
机器学习/深度学习 Web App开发 前端开发
【Web开发】深度学习HTML(超详细,一篇就够了)
【Web开发】深度学习HTML(超详细,一篇就够了)
11 0

热门文章

最新文章