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不是一种持久化的本地 ...
随机推荐
- Fibonacci Nim
目录 题意 题解 相关 Ref 题意 [COCI2010-2011#4] HRPA 取石子,但是: 先手第一次可取任意多个石子 此外每次可取的石子的个数,至少为 \(1\) ,至多为上一轮对方所取个数 ...
- CMake库搜索函数居然不搜索LD_LIBRARY_PATH
摘要: 本文通过编译后运行找不到库文件的问题引入,首先分析了find_package(JNI)的工作流程,而后针对cmake不搜索LD_LIBRARY_PATH的问题,提出了一种通用的解决办法. 本文 ...
- 《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(11)-Fiddler设置安卓手机抓包,不会可是万万不行的!
1.简介 Fiddler不但能截获各种浏览器发出的 HTTP 请求,也可以截获各种智能手机发出的HTTP/ HTTPS 请求. Fiddler能截获 Android 和 Windows Phone 等 ...
- 【喜讯】Apache DolphinScheduler 荣获 “2020 年度十大开源新锐项目”
经 10000+ 开发者公开票选,20+专家评审. 10+ 主编团打分,历经数月打磨,11 月 19 日,由InfoQ 发起并组织的[2020中国技术力量年度榜单评选]结果正式揭晓. 2020 年度十 ...
- 巨细靡遗流程控制,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang流程结构详解EP09
流程结构就是指程序逻辑到底怎么执行,进而言之,程序执行逻辑的顺序.众所周知,程序整体都是自上由下执行的,但有的时候,又不仅仅是从上往下执行那么简单,大体上,Go lang程序的流程控制结构一共有三种: ...
- LuoguP4719 【模板】动态 DP(动态DP,LCT)
\(n \times m\)的算法谁都会吧,注意到每次修改影响的仅是一部分的信息,因此可思考优化. 将每个节点对应一个矩阵\(\begin{bmatrix} g[v][0] & g[v][0] ...
- windows自动切换深色模式(夜晚模式)
img { width: 30vw } windows系统上怎么根据日出日落时间判断切换为深色模式或浅色模式呢? windows系统自带了一个叫做"任务计划程序"的软件.可以通过& ...
- Android OOM 问题探究 -- 从入门到放弃
一.前言 最近客户反馈了一些OOM的问题,很早之前自己也有简单了解过OOM的知识,但时间久远,很多东西都记不清了. 现在遇到这个OOM问题,也即趁此搜索了一些资料,对OOM问题做一些探究,把资料记录于 ...
- 造序列(构造,DP)
题面 Sample Input 7 8 7 10 31 20 100 869120 Sample Output 6 1 1 4 5 1 4 7 1 9 1 9 8 1 0 8 1 9 4 9 1 0 ...
- Arrays.asList()你真的知道怎么用吗?
发现问题 前几天在看别人的项目的时候,发现一个问题,简单复现一下这个问题 // 注意这是一个Integer对象的数组哦 Integer[] arr = new Integer[]{9999,88,77 ...