在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的删除

  1. 将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概要的更多相关文章

  1. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  2. 笔记《JavaScript 权威指南》(第6版) 系统理论知识概要

    主要内容概要 [JavaScript语言核心]词法结构,类型.值和变量,表达式和运算符,语句,对象,数组,函数,类和模块,正则表达式的模式匹配,JavaScript的子集和扩展,服务器端JavaScr ...

  3. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  4. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  5. .Net 分布式云平台基础服务建设说明概要

    1)  背景 建设云平台的基础框架,用于支持各类云服务的业务的构建及发展. 2)  基础服务 根据目前对业务的理解和发展方向,总结抽象出以下几个基础服务,如图所示 3)  概要说明 基础服务的发展会根 ...

  6. 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  7. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  8. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  9. cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

随机推荐

  1. 161_可视化_Power BI 复刻 GitHub 贡献热力图

    161_可视化_Power BI 复刻 GitHub 贡献热力图 一.背景 在 GitHub 上,有用户的贡献度的热力图如下: Power BI 公共 web 效果:https://demo.jiao ...

  2. 二重循环中的break与continue

    二重循环中的break和continue用于控制本层循环,注意其不会影响外层循环的执行,这边和C中的break和continue的作用范围是一样的,也符合逻辑 example: 点击查看代码 for ...

  3. 常用的函数式接口_Prodicate接口_默认方法or&negate和常用的函数式接口_Predicate接口练习_集合信息筛选

    常用的函数式接口_Prodicate接口_默认方法or&negate OR package com.yang.Test.PredicateStudy; import java.util.fun ...

  4. FileFilter过滤器的原理和使用和FileNameFilter过滤器的使用

    FileFilter过滤器的原理和使用 package com.yang.Test.FileStudy; import java.io.File; /** * 在File类中有两个和ListFiles ...

  5. React报错之Object is possibly null

    正文从这开始~ 类型守卫 使用类型守卫来解决React中useRef钩子"Object is possibly null"的错误.比如说,if (inputRef.current) ...

  6. ARC129E Yet Another Minimization 题解 【网络流笔记】

    超神的建模,极其有借鉴意义/cy 注:该建模对应于最小割建模 对于 \(n\) 个数,每个数有 \(m\) 种取值的技巧 \(\forall i=1,2,\dots,n\),令 \(S=V_{i,0} ...

  7. Redis 13 事务

    参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 Redi ...

  8. Mybatis核心配置文件中的标签介绍

    0. 标签顺序 Mybatis核心配置文件中有很多标签,它们谁谁写在前写在后其实是有顺序要求的: 从前到后: properties?,settings?,typeAliases?,typeHandle ...

  9. [NOI2021] 密码箱 (平衡树,连分数,Stern-Brocot 树,矩阵)

    题面 记忆犹新 题解 f f f 函数值给得非常明显,一看就给人一种熟悉感--这不是连分数吗? 众所周知,连分数有个递推公式,即 p i = a i p i − 1 + p i − 2 q i = a ...

  10. Atcoder ZONe Energy Programming Contest C - MAD TEAM(二分)

    文章目录 题面 Sample Input Sample output 题解 CODE 别的做法 暴力 Dynamic Programming 题面 你想从 N N N 个候选人中选 3 个人. 每个人 ...