在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. 分享一个基于Abp Vnext开发的API网关项目

    这个项目起源于去年公司相要尝试用微服务构建项目,在网关的技术选型中,我们原本确认了ApiSix 网关,如果需要写网关插件需要基于Lua脚本去写,我和另外一个同事当时基于这个写了一个简单的插件,但是开发 ...

  2. Linux—文件系统结构

    1.文件目录结构 /:是Linux系统的根目录 /bin:存放用户经常使用的命令 /boot:启动加载程序的静态文件 /dev:设备文件目录,不能单独分区 /etc:系统配置文件目录 /home:普通 ...

  3. python编程思想及对象与类

    目录 编程思想 面向对象 面向过程 对象与类的概念 对象与类的创建 对象的实例化方法-独有数据 编程思想 1.面向对象 1.1. 面向对象前戏 案例:人狗大战 # 需求:人狗大战# 1.'创造'出人和 ...

  4. 学习nginx的一点记录

    一.nginx定义 Nginx是一款轻量级的.高性能的,具备HTTP.反向代理.负载均衡的web服务器,同时还提供IMAP/POP3/SMTP服务,其特点是占用内存少,并发能力强. 二.nginx基本 ...

  5. 线程本地存储 ThreadLocal

    线程本地存储 · 语雀 (yuque.com) 线程本地存储提供了线程内存储变量的能力,这些变量是线程私有的. 线程本地存储一般用在跨类.跨方法的传递一些值. 线程本地存储也是解决特定场景下线程安全问 ...

  6. [NCTF2019]True XML cookbook-1|XXE漏洞

    1.打开题目之后和做的上一道:https://www.cnblogs.com/upfine/p/16534940.html题目界面一样,查看源代码等未发现有用信息,界面如下: 2.那就先按原来那道题的 ...

  7. java-异常处理和线程的一些简单方法及使用

    1.1 子类重写父类含有throws声明异常抛出的方法时的规则: 1.允许不再抛出任何异常. 2.仅抛出部分异常. 3.抛出父类方法抛出异常的子类型异常. 4.不可以抛出额外异常. 5.不能抛出父类方 ...

  8. Java-面向对象三大特征、设计规则

    1)封装: 1.1)类:封装的是对象的属性和行为 1.2)方法:封装的是具体的业务逻辑实现 1.3)访问控制修饰符:封装的是访问的权限 2)继承: 2.1)作用:代码的复用 2.2)父类/基类:共有的 ...

  9. ftp: connect: No route to host 解决方案

    实验环境: centos7 x2 server-vsftp:192.168.1.32 client:192.168.95 客户端测试访问 ftp服务器 报错:ftp: connect: No rout ...

  10. 圆形谷仓Circular Barn_Silver---(DP优化 / )队列 + 贪心(复杂度O(2n))---DD(XYX)​​​​​​​的博客

    目录 小数据 大数据 小数据 题目描述 农夫约翰有一个圆形的谷仓,谷仓分成了环形的n(3≤n≤1000)个房间,编号为1 , 2 , -- .每个房间有三个门,两个门通往两个相邻的房间,第三个门朝外. ...