localStorage基本了解及使用
以下内容来自： https://www.cnblogs.com/st-leslie/p/5617130.html 感谢大佬的分享
一、什么是localStorage、sessionStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
二、localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
这里我们以localStorage来分析
三、localStorage的使用
localStorage的浏览器支持情况：
这里要特别声明一下，如果是使用IE浏览器的话，那么就要UserData来作为存储，这里主要讲解的是localStorage的内容，所以userData不做过多的解释，而且以博主个人的看法，也是没有必要去学习UserData的使用来的，因为目前的IE6/IE7属于淘汰的位置上，而且在如今的很多页面开发都会涉及到HTML5\CSS3等新兴的技术，所以在使用上面一般我们不会去对其进行兼容
首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性
接下来看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
QAQ：测试localStorage
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
$(function(){
if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
<!--三种写入方式-->
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=2;
//写入c字段
storage.setItem("c",3);
<!-- localStorage只能存储String类型的数据-->
console.log(typeof storage["a"]);
console.log(typeof storage.b);
console.log(typeof storage.getItem("c"));
<!-- 三种获取方式-->
console.log("第一种："+storage.a);
console.log("第二种："+storage["a"]);
console.log("第三种："+storage.getItem("a"));
<!-- 修改 -->
storage.a="a";
console.log("修改后");
console.log(storage);
//console.log("修改后："+"a:"+storage.getItem("a")+" b:"+storage.b+" c:"+storage["c"]);
<!-- 删除 -->
//清空storage
/* storage.clear();
console.log("清空后");
console.log(storage); */
//console.log("删除后："+"a:"+storage.getItem("a")+" b:"+storage.b+" c:"+storage["c"]);
//删除特定键a
storage.removeItem("a");
//console.log("删除a后："+"a:"+storage.getItem("a")+" b:"+storage.b+" c:"+storage["c"]);
console.log("删除a前");
console.log(storage);
console.log("删除后");
console.log(storage);
<!-- 获取键 -->
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(i+":"+key);
} <!-- 存放json类型的数据 使用JSON.stringify(data)方法-->
var data={
name:"lccc",
age:"22",
sex:"男"
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log("data:");
console.log(storage.data);
console.log("dataType:");
console.log(typeof storage.data);
<!-- 读取json类型的数据 使用JSON.stringify(data)方法 -->
<!-- 注意：其他类型读取出来也要进行转换 -->
var jsonData=storage.getItem("data");
var jsonObj=JSON.parse(jsonData);
console.log("转化后：");
console.log(jsonObj);
console.log(typeof jsonObj); } });
</script>
</html>
再看控制台结果：
----------------------------------------over-------------------------------------------------
localStorage基本了解及使用的更多相关文章
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 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不是一种持久化的本地 ...
- sessionStorage 和 localStorage 、cookie
sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...
- 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考
首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...
- 初识html5的localStorage本地存储
一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...
- HTML5本地存储Localstorage
什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...
- HTMl5的存储方式sessionStorage和localStorage详解
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- localStorage使用总结
一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...
随机推荐
- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xd0 in position 0: invalid continuation byte
用pandas打开csv文件可能会出现这种情况,原因可能是excel自己新建一个*.csv文件时候容易出错.进入文件另存为,然后选择csv文件即可.
- Java一棵树
手里有一枚java种子,刚播下,希望长出一棵参天大树. 一.Java Java线程 二.网络 三.算法 四.中间件 五.性能指标&优化 六.设计模式
- SpringBoot项目 设置全局跨域
package com.nf147.policy_project; import org.springframework.stereotype.Component; import javax.serv ...
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- Http中的三种请求处理模式（MPM）的区别
MPM---包括基于事件/异步,线程化和预分叉 MPM(multi-processing module)多种请求处理模式,分为三种工作模式: prefork worker event prefork- ...
- Vue上传通过“服务端签名后直传”上传文件到阿里云 报错 400 Bad Request
我报错的原因是 formData.append('file', file) 放在签名前面了 解决办法 formData.append('file', file) 一定在最后 /** * 上传文件到 o ...
- jquery live()方法 语法
jquery live()方法 语法 作用:live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及 ...
- MySQL数据库中的索引（二）——索引的使用，最左前缀原则
上文中,我们了解了MySQL不同引擎下索引的实现原理,在本文我们将继续探讨一下索引的使用以及优化. 创建索引可以大大提高系统的性能. 第一,通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性. ...
- BZOJ 3270: 博物馆 概率与期望+高斯消元
和游走挺像的,都是将概率转成期望出现的次数,然后拿高斯消元来解. #include <bits/stdc++.h> #define N 23 #define setIO(s) freope ...
- Linux添加磁盘和挂载
1.新建一个虚拟磁盘,例:20GB 2.重启后使用 fdisk -l 查看磁盘详细信息,刚添加的磁盘信息如下: 3.对刚添加的磁盘进行分区 fdisk /dev/sdc 4.格式化分区 mkfs.ex ...