html离线存储之localStorage（一）

最新推荐文章于 2021-08-28 09:44:17 发布

Aman920_

最新推荐文章于 2021-08-28 09:44:17 发布

阅读量1.3k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/MrZZhou/article/details/54865527

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML的离线存储机制localStorage，重点讲解了其核心方法如getItem、setItem、removeItem等，并强调了使用时的注意事项，包括异常处理、容量限制、敏感信息存储等问题。还提到了localStorage的浏览器兼容性和不同域下的独立性。

摘要由CSDN通过智能技术生成

h5之前的离线存储：cookie
问题是：1.cookie会在请求头中，臃肿且不安全
2.cookie有大小限制，4k
3.关系存储问题
h5提供的离线存储方案：
1.localstorage 大小5M sessionstorage（存储会话，关闭会话数据消失）
2.appliacation cache
3.indexDB和webSQL

localstorage

1.核心方法：

getItem 根据键获取值

setItem 创建新的记录

removeItem 根据键删除对应记录

key 获取localStorage的属性名称（键名称）

clear 清除所有键值对

其中创建新的记录方法：localStorage.setItem(key,value)和localStorage.key=value

需要注意的地方：

1.使用前判断浏览器是否支持

2.写数据时需要进行异常处理，避免超出容量出错

3.避免把敏感的信息写入localStorage

4.key唯一性

5.localstorage无法指定存储位置

6.不同浏览器在同一域下产生的localstorage数据是独立的

判断浏览器是否支持的方法：先set一次，并进行异常捕获

容量查看可参考http://www.cnblogs.com/MonkeyKingK/p/5499831.html

下面是写的一些接口，带过期检测处理

//浏览器支持性检测
function ifSupport() {
	try{
		localStorage.setItem("test","ifSupport");
		localStorage.removeItem("test");
		return true;
	}catch(e){
		if(e.message){
			console.log(e.name+":"+e.message);
		}else{
			//IE
			console.log(e.name+":"+e.description);
		}
	}
}

//带过期时间的set value(string)
function setWithLife(key,value){
	var curtime=new Date().getTime();
	localStorage.setItem(key,JSON.stringify({data:value,time:curtime}));
}

//带过期检测的get,过期可选删除 exp(timestamp)设定的过期时间
function getWithLife(key,exp,dele=false){
	var nowtime=new Date().getTime();
	var json_data=localStorage.getItem(key);
	var obj_data=JSON.parse(json_data);
	if(nowtime-obj_data.time<exp){
		return obj_data.data;
	}else{
		if(dele!=false){
			localStorage.removeItem(key);
		}else{
			return false;
		}
	}
}