localStorage概要
在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")+")")
localStorage概要的更多相关文章
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- 笔记《JavaScript 权威指南》(第6版) 系统理论知识概要
主要内容概要 [JavaScript语言核心]词法结构,类型.值和变量,表达式和运算符,语句,对象,数组,函数,类和模块,正则表达式的模式匹配,JavaScript的子集和扩展,服务器端JavaScr ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- .Net 分布式云平台基础服务建设说明概要
1) 背景 建设云平台的基础框架,用于支持各类云服务的业务的构建及发展. 2) 基础服务 根据目前对业务的理解和发展方向,总结抽象出以下几个基础服务,如图所示 3) 概要说明 基础服务的发展会根 ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 似懂非懂的localStorage和sessionStorage
一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...
- 将css和js缓存到localStorage缓存,提高网页响应速度
适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...
- cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
随机推荐
- Java学习第五周
这周学习了异常与多线程,线程使用 Exception异常的分类: 1.编译时异常:继承自Exception的异常或者其子类,编译阶段就会报错 2.运行时异常:继承自RuntimeException的异 ...
- PostgreSQL 备份
# WAL日志: # 我们对数据库的增删改查创建之前先是将sql语句记录在WAL日志中, # 只有日志记录刷新到磁盘后,才能写入数据库文件. # 遵从这个过程,不需要在每个事务提交时都刷新数据页到数据 ...
- SDK和API的直接区别
狭义的说法,在实际工作中, 如果对方需要你提供一个api,是指一个工程提供给另外一个工程的接口(一般是基于http协议). 如果对方需要你提供一个sdk,是指基于对方工程的编程语言,提供一个代码包.在 ...
- 【freertos】013-任务通知及其实现细节
前言 参考: https://www.freertos.org/RTOS-task-notifications.html 原文:https://www.cnblogs.com/lizhuming/p/ ...
- 技术分享 | MySQL中MGR中SECONDARY节点磁盘满,导致mysqld进程被OOM Killed
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 在MGR测试中,人为制造磁盘满问题后,节点被oom killed 问题描述 在对 ...
- NetCore路由的Endpoint模式
IdentityServer里有各种Endpoint,如TokenEndpoint,UserInfoEndpoint,Authorize Endpoint,Discovery Endpoint等等.E ...
- Docker 04 容器命令
参考源 https://www.bilibili.com/video/BV1og4y1q7M4?spm_id_from=333.999.0.0 https://www.bilibili.com/vid ...
- java学习第二天小细节.day10
栈内存溢出表示可以使用递归 This的使用 普通方法,字段,其他方法与构造器三种访问方法 Super的使用 在子类如果需要使用到父类的字段者使用到super(字段,字段),需要放到第一行,因需要初始化 ...
- SpringBoot整合Redis实现常用功能
SpringBoot整合Redis实现常用功能 建议大小伙们,在写业务的时候,提前画好流程图,思路会清晰很多. 文末有解决缓存穿透和击穿的通用工具类. 1 登陆功能 我想,登陆功能是每个项目必备的功能 ...
- Manacher算法讲解——字符串最长回文子串
引 入 引入 引入 Manachar算法主要是处理字符串中关于回文串的问题的,这没什么好说的. M a n a c h e r 算 法 Manacher算法 Manacher算法 朴素 求一个字符串中 ...