HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

更新时间:2023-04-06 15:44:29 阅读：评论：0

html5 的本地存储 api 中的 localstorage 与 ssionstorage 在使用方法上是相同的，区别在于 ssionstorage 在关闭页面后即被清空，而 localstorage 则会一直保存。我们这里以 localstorage 为例，简要介绍下 html5 的本地存储，并针对如遍历等常见问题作一些示例说明。 localstorage 是 html5 本地存储的 api，使用键值对的方式进行存取数据，存取的数据只能是字符串。不同浏览器对该 api 支持情况有所差异，如使用方法、最大存储空间等。

一、localstorage api 基本使用方法

localstorage api 使用方法简单易懂，如下为常见的 api 操作及示例：设置数据：localstorage.titem(key,value); 示例：

复制代码代码如下:

for(var i=0; i<10; i++){

localstorage.titem(i,i);

}

获取数据：localstorage.新高考一卷getitem(key) 获取全部数据：localstorage.valueof() 示例：

复制代码代码如下: for(var i=0; i<10; i++){

localstorage.getitem(i);

}

删除数据：localstorage.removeitem(key) 示例：

复制代码代码如下: for(var i=0; i<5; i++){

localstorage.removeitem(i);

}

清空全部数据：localstorage.clear() 获取本地存储数据数量：localstorage.length 获取第 n 个数据的 key 键值：localstorage.key(n)

2. 遍历 key 键值方法

复制代码代码如下:

for(var i=localstorage.length – 1 ; i >=0; i–){

console.log(‘第’+ (i+1) +’条数据的键值为：’ + localstorage.key(i) +’，数据为：’ + localstorage.getitem(localstorage.key(i)));

}

3. 存储大小限制测试及异常处理

3.1 数据存储大小限制测试

不同浏览器对 html5 的本地存储大小基本均有限制，一个测试的结果如下：

复制代码代码如下: ie 9 > 4999995 + 5 = 5000000

firefox 22.0 > 5242875 + 5 = 5242880

chrome 28.0 > 2621435 + 5 = 2621440

safari 5.1 > 2621435 + 5 = 2621440

opera 12.15 > 5m （超出则会弹出允许请求更多空间的对话框）

测试代码参考：

复制代码代码如下:

<!doctype html>

<html>

<head>

<script>

function log( msg ) {

console.log(msg);

alert(msg);

}</p> <p> var limit;

var half = ‘1’; //这里会换成中文再跑一遍

var str = half;

var sstr;

教育学专业代码while ( 1 ) {

try {

localstorage.clear();

str += half;

localstorage.titem( ‘cache’, str );

half = str;

} catch ( ex 和声学基础知识) {

break;

}

}

var ba = str.length;

var off = ba / 2;

var isleft = 1;

while ( off ) {

if ( isleft ) {

end = ba – (off / 2);

} el {

end = ba + (off / 2);

}</p> <p> sstr = 关于孝顺的句子str.slice( 0, end );

localstorage.clear();

try {

localstorage.titem( ‘cache’什么的秋雨, sstr );

limit = sstr.length;

isleft = 0;

} catch ( e ) {

isleft = 1;

}</p> <p> ba = end;

off = math.floor( off / 2 );

}</p> <p> log( ‘limit: ‘ + limit );

</script>

</html>

3.2 数据存储异常处理

复制代码代码如下:

try{

localstorage.titem(key,value);

}catch(oexception){

if(oexception.name == ‘quotaexceedederror’){

console.log(‘超出本地存储限额！’);

//如果历史信息不重要了，可清空后再设置

localstorage.clear();

localstorage.titem(key,value);

}

}