HTML5 LocalStorage 本地存储原理详解
首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。
if(window.localstorage){
alert('this brower supports localstorage');
}else{
alert('this brower not supports localstorage)
}
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
localStorage.setItem("a","isaac");//设置a的值为"isaac"
var a = localStorage.getItem("a");//获取a的值
localStorage.removeItem("a");//清除a的值
最推荐使用的自然是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>")
}
}
需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。
另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。
HTML5 LocalStorage 本地存储原理详解的更多相关文章
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- HTML5 LocalStorage 本地存储(转)
原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...
- 【转】HTML5 LocalStorage 本地存储
原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...
- HTML5 LocalStorage 本地存储总结
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"] ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- HTML5 LocalStorage 本地存储,刷新值还在
H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStorage会话存储,页面关闭数据就会丢失. 使用方法: localStor ...
- HTML5 LocalStorage 本地存储的用法
本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...
- 前端数据存储方案集合(cookie localStorage等)以及详解 (二)
前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...
随机推荐
- 二、oracle数据库成功安装步骤 配置监听器
Oracle数据库使用监听器来接收客户端的连接请求,要使客户端能连接Oracle数据库,必须配置监听程序. 在安装Oracle数据库时,如果选择的是"创建和配置数据库",则安装 ...
- 【转】SQL Server中的事务与锁
SQL Server中的事务与锁 了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂 ...
- php 下载文件代码段
/** * 下载 * @param [type] $url [description] * @param string $filename [description] * @return [type] ...
- OpenCV Haartraining
opencv_haartraining.exe -data xml -vec pos.vec -bg neg/neg.txt -w 20 -h 20 -mem 144 opencv_haartrain ...
- 添加系统右键菜单项 管理员取得所有权(W)(带盾牌)
@color 0A @title 添加系统右键菜单项 管理员取得所有权(^&W)(带盾牌) by wjshan0808 @echo off echo * >nul reg add HKC ...
- 使用hbuilder编辑器实现移动app打包
作为一枚web前端来讲,需要了解的东西太多,需要学习的也太多了,那天因为公司需求,就研究了下移动网站打包成app的方法,这种东西好像是H5出来后就有推出的,因为性功能不行,就没怎么关注,但现在移动互联 ...
- Centos下安装nginx rpm包
1 在nginx官方网站下载一个rpm包,下载地址是:http://nginx.org/en/download.html wget http://nginx.org/packages/centos/6 ...
- C++之路进阶codevs1269(匈牙利游戏)
1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description ...
- DataRow映射实体
public static T ConvertToModel<T>(DataRow dr) where T : new() { T t = new T(); Type modelType ...
- XEN的启动信息输出到“Platform timer is 14.318MHz HPET”就暂停接收的解决办法
使用Serial Over Lan(SOL)来双机调试 XEN,在 XEN 启动时,引导信息输出到以下这一句时,就不再发送调试信息了: ...(XEN) Intel machine check rep ...