localStorage概要
2024-09-08 15:29:58
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
localStorage的读取
1 if(!window.localStorage){
2 alert("浏览器支持localstorage");
3 }else{
4 var storage=window.localStorage;
5 //写入a字段
6 storage["a"]=1;
7 //写入b字段
8 storage.a=1;
9 //写入c字段
10 storage.setItem("c",3);
11 console.log(typeof storage["a"]);
12 console.log(typeof storage["b"]);
13 console.log(typeof storage["c"]);
14 //第一种方法读取
15 var a=storage.a;
16 console.log(a);
17 //第二种方法读取
18 var b=storage["b"];
19 console.log(b);
20 //第三种方法读取
21 var c=storage.getItem("c");
22 console.log(c);
23 }
localStorage的删除
将localStorage的所有内容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
2. 将localStorage中的某个键值对删除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
localStorage的键获取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
补充
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串,读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法
localStorage.setItem 只能存储字符串,所以在储存的时候先将对象转换为字符串 localStorage.setItem("localKey", JSON.stringify(this.cartGroup))然后再将字符串转换为对象
方法1: JSON.parse(localStorage.getItem("localKey")
方法2: eval("("+localStorage.getItem("localKey")+")")
最新文章
- IOS开发基础知识--碎片46
- Struts2请求参数校验
- My Game --线段数据
- bzoj 1064
- Oracle 使用小计
- 网页JavaScript2
- 让浏览器支持 jquery ajax load 前进、后退 功能
- opencv轮廓处理函数详细
- java实现——008旋转数组的最小数字
- mac系统下给文件夹加密方法
- WebDriver的等待方式
- window环境搭建zookeeper,kafka集群
- Linux服务器安装Oracle服务端总结
- VBA中查找并选定文字
- 分布式ID生成策略
- Android接口Parcelable的使用
- 最小生成树入门(克鲁斯卡尔+普利姆 hdu1233)
- Python基础6 面向对象
- mysql 数据库远程访问设置方法
- 搭建hibernate
热门文章
- vite搭建一个vue2的框架
- hive SQL 初学者题目,实战题目 字符串函数,日期拼接,开窗函数。。。。
- MD5,Des,RSA加密解密
- .Net之时间轮算法(终极版)定时任务
- Vue中computed用法
- 《DevOps围炉夜话》- Pilot - CNCF开源DevOps项目DevStream简介 - feat. PMC成员胡涛
- 达人专栏 | 还不会用 Apache Dolphinscheduler?大佬用时一个月写出的最全入门教程【三】
- mybatis 08: 返回主键值的insert操作 + 利用UUID获取字符串(了解)
- 简单概述 TCP/IP 协议簇
- P7727 风暴之眼 Eye of the Storm (树形 DP)