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不是一种持久化的本地 ...
随机推荐
- Solution -「校内题」Xorequ
0x00 前置芝士 数位dp考试里出现的小神题?? 显然考场会选择打表找规律. 数位dp + 矩阵快速幂 0x01 题目描述 给定正整数 \(n\),现有如下方程 \(x \bigoplus 3x = ...
- 加强版:合并果子[NOIP2004]
题目 链接:https://ac.nowcoder.com/acm/contest/26887/1001 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K, ...
- iOS中 Tagged Pointer 技术
前言: 从64位开始,iOS引入了Tagged Pointer技术,用于优化NSNumber.NSDate.NSString等小对象的存储. Tagged Pointer主要为了解决两个问题: 内 ...
- SpringCloud微服务实战——搭建企业级开发框架(四十五):【微服务监控告警实现方式二】使用Actuator(Micrometer)+Prometheus+Grafana实现完整的微服务监控
无论是使用SpringBootAdmin还是使用Prometheus+Grafana都离不开SpringBoot提供的核心组件Actuator.提到Actuator,又不得不提Micrometer ...
- 我又造了个轮子:GrpcGateway
我个人对GRPC是比较感兴趣的,最近在玩通过前端调用GRPC.通过前端调用GRPC业界有两种方式:GRPC Web和GRPC JSON转码. GRPC Web 通过JS或者Blazor WASM调用G ...
- 用JavaScript写随机出一个颜色
function changeColor(){ var r = parseInt(Math.random()*255) var g = parseInt(Math.random()*255) var ...
- 哈工大软件构造Lab3(2022)
(防扒小助手) 本人CSDN博客: https://blog.csdn.net/m0_61753302 本人博客园博客(同步CSDN): 何以牵尘 - 博客园 (cnblogs.com)https:/ ...
- 使用 for 循环 打印 9X9乘法表
C 语言自学之99乘法表 请使用for循环,倒序打印9*9乘法表 1 #include <stdio.h> 2 3 int main() 4 { 5 int i,j,result;//定义 ...
- Canvas 线性图形(二):圆形
函数 arc(x, y, radius, startAngle, endAngle, counterclockwise) 参数名 描述 x.y 圆心坐标轴 radius 圆的半径 startAngle ...
- JavaScript 异步编程(二):Promise
PromiseState Promise 有一个 [[PromiseState]] 属性,表示当前的状态,状态有 pending 和 fulfill 以及 reject. 从第一个 Promise 开 ...