H5-localStorage数据存储总结

一、什么是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这个属性

if(!window.localStorage){alert("浏览器支持localstorage");return false;}else{//主逻辑业务}

 

localStorage的写入,localStorage的写入有三种方法,这里就一一介绍一下

复制代码
if(!window.localStorage){alert("浏览器支持localstorage");return false;}else{var storage=window.localStorage;//写入a字段storage["a"]=1;//写入b字段storage.b=1;//写入c字段storage.setItem("c",3);console.log(typeof storage["a"]);console.log(typeof storage["b"]);console.log(typeof storage["c"]);}
复制代码

 

运行后的结果如下:

这里要特别说明一下localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage

最后在控制台上面打印出来的结果是:

不知道各位读者有没有注意到,刚刚存储进去的是int类型,但是打印出来却是string类型,这个与localStorage本身的特点有关,localStorage只支持string类型的存储。

localStorage的读取

复制代码
if(!window.localStorage){alert("浏览器支持localstorage");}else{var storage=window.localStorage;//写入a字段storage["a"]=1;//写入b字段storage.b=1;//写入c字段storage.setItem("c",3);console.log(typeof storage["a"]);console.log(typeof storage["b"]);console.log(typeof storage["c"]);//第一种方法读取var a=storage.a;console.log(a);//第二种方法读取var b=storage["b"];console.log(b);//第三种方法读取var c=storage.getItem("c");console.log(c);}
复制代码

 

这里面是三种对localStorage的读取,其中官方推荐的是getItem\setItem这两种方法对其进行存取,不要问我这个为什么,因为这个我也不知道

我之前说过localStorage就是相当于一个前端的数据库的东西,数据库主要是增删查改这四个步骤,这里的读取和写入就相当于增、查的这两个步骤

下面我们就来说一说localStorage的删、改这两个步骤

改这个步骤比较好理解,思路跟重新更改全局变量的值一样,这里我们就以一个为例来简单的说明一下

 

复制代码
if(!window.localStorage){alert("浏览器支持localstorage");}else{var storage=window.localStorage;//写入a字段storage["a"]=1;//写入b字段storage.b=1;//写入c字段storage.setItem("c",3);console.log(storage.a);// console.log(typeof storage["a"]);// console.log(typeof storage["b"]);// console.log(typeof storage["c"]);/*分割线*/storage.a=4;console.log(storage.a);}
复制代码

 

这个在控制台上面我们就可以看到已经a键已经被更改为4了

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);}
复制代码

 

使用key()方法,向其中出入索引即可获取对应的键

 

四、localStorage其他注意事项

 一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串

示例:

复制代码
if(!window.localStorage){alert("浏览器支持localstorage");}else{var storage=window.localStorage;var data={name:'xiecanyong',sex:'man',hobby:'program'};var d=JSON.stringify(data);storage.setItem("data",d);console.log(storage.data);}
复制代码

 

读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法

复制代码
var storage=window.localStorage;var data={name:'xiecanyong',sex:'man',hobby:'program'};var d=JSON.stringify(data);storage.setItem("data",d);//将JSON字符串转换成为JSON对象输出var json=storage.getItem("data");var jsonObj=JSON.parse(json);console.log(typeof jsonObj);
复制代码

打印出来是Object对象

另外还有一点要注意的是,其他类型读取出来也要进行转换

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正则校验与时间格式化

// 日期回显 export function formatTime(data&#xff0c;fametYYYY-MM-DD HH:MMM:SS) {if(famet YYYY-MM-DD HH:MMM:SS){const time new Date(data)const year time.getFullYear()const month time.getMonth() 1const day time.getDate()const hour time.getHours()co…

CometOJ#6 双倍快乐(简单DP)

链接&#xff1a;https://www.cometoj.com/contest/48/problem/B 题意&#xff1a;给出一串数列&#xff0c;要求在这个数列中找出两条“不相交”的非下降子序列使得子序列之和最大。“不相交”即不存在任意的ai同时存在于两个子序列中。 分析&#xff1a;笔者刷题量不多&#…

iOS开发-证书问题精析~

在iOS开发过程中&#xff0c;不可避免的要和证书打交道&#xff0c;真机调试、App上架、打包给测试去测试等都需要搞证书。在此过程中我们会遇到很多的问题&#xff0c;但是如果掌握了真机调试的原理和本质&#xff1b;遇到问题&#xff0c;我们就更容易定位问题之所在&#xf…

selenium+Java自动化

转载于:https://www.cnblogs.com/arvin-feng/p/11110483.html

html 5 本地数据库(Web Sql Database)

基于HTML5的Web DataBase 可以让你在浏览器中进行数据持久地存储管理和有效查询&#xff0c;假设你的离线应用程序有需要规范化的存储功能 本文讲述如何使用核心方法openDatabase、transaction、executeSql 1.新建一个网页&#xff0c;比如&#xff1a;test.html 内容如下&am…

前端学习资料及路线名称网站

IT前端学习资料及路线常用PC端UI组件库饿了么(Element-UI)https://element.eleme.cn/#/zh-CN常用小程序端UI组件库uView UIhttp://v1.uviewui.com/名称网站JQuery文件网https://code.jquery.com/jquery/jQuery手册&#xff08;pc端&#xff09;http://jquery.cuishifeng.cn/jQu…

JS实现生成一个周对应日期数组

/* 获取日期和周 */getDateWeek() {/* 得到当前日期的时间戳 */const timestamp Date.now()// const timestamp new Date(2019, 7, 30, 0, 0, 0, 0).getTime()const dateWeek Array.from(new Array(7)).map((_, i) > {/* 得到当前周每一天的时间戳 */const weekTimestamp…

npm升级package.json依赖包

使用npm管理node的包&#xff0c;可以使用npm update <name>对单个包升级&#xff0c;对于npm的版本大于 2.6.1,可以使用命令: npm install -g 升级全局的本地包。 对于版本小于2.6.1的一个一个包的升级实在是太麻烦&#xff0c;就想找到一个升级所有本地包的方法&#x…

Sublime Text 3 快捷键汇总

Sublime Text 3非常实用&#xff0c;但是想要用好&#xff0c;老是忘记&#xff0c;汇总一下&#xff0c;方便自己方便别人。 用惯了vim&#xff0c;有些快捷键也懒得用了&#xff0c;尤其是在win下面&#xff0c;还有图形界面&#xff0c;所以个人觉得最有用的还是搜索类&…

Minimal coverage (贪心,最小覆盖)

题目大意&#xff1a;先确定一个M&#xff0c; 然后输入多组线段的左端和右端的端点坐标&#xff0c;然后让你求出来在所给的线段中能够 把[0, M] 区域完全覆盖完的最少需要的线段数&#xff0c;并输出这些线段的左右端点坐标。 思路分析&#xff1a; 线段区间的起点是0&#x…

vuex知识点

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式&#xff1b;集中存储和管理应用的所有组件状态。 状态&#xff1a;什么是状态&#xff0c;我们可以通俗的理解为数据。Vue只关心视图层&#xff0c;那么视图的状态如何来确定&#xff1f;我们知道是通过数据驱动&#xff0c…

Kafka2.0生产者客户端使用

1 初始化配置 Kafka 通过 KafkaProducer 构造器初始化生产者客户端的配置。   常用的重要配置&#xff0c;详见官网。 bootstrap.servers&#xff1a;Kafka 集群地址&#xff08;host1:post,host2:post&#xff09;&#xff0c;Kafka 客户端初始化时会自动发现地址&#xff0…

vuex小例

少废话&#xff0c;先出东西 vuex main.js import Vue from vue import App from ./App import router from ./router import store from ./store Vue.config.productionTip falsenew Vue({el: #app,router,store,render: xx>xx(App) })store.js 平级目录未建文件夹import…

[论文笔记]CVPR2017_Joint Detection and Identification Feature Learning for Person Search

Title: Joint Detection and Identification Feature Learning for Person Search; aXiv上该论文的第一个版本题目是 End-to-End Deep Learning for Person SearchAuthors: Tong Xiao1* ; Shuang Li1* ; Bochao Wang2 ; Liang Lin2; Xiaogang Wang1 Affilations: 1.The Chines…

php下的原生ajax请求

浏览器中为我们提供了一个JS对象XMLHttpRequet&#xff0c;它可以帮助我们发送HTTP请求&#xff0c;并接受服务端的响应。 意味着我们的浏览器不提交&#xff0c;通过JS就可以请求服务器。ajax(Asynchronous Javascript And XML)其实就是通过XHR对象&#xff0c;执行HTTP请求。…

HBase性能优化总结

HBase性能优化方法总结&#xff08;一&#xff09;&#xff1a;表的设计 1. 表的设计 1.1 Pre-Creating Regions 默认情况下&#xff0c;在创建HBase表的时候会自动创建一个region分区&#xff0c;当导入数据的时候&#xff0c;所有的HBase客户端都向这一个region写数据&#x…

.NetCore如何使用ImageSharp进行图片的生成

ImageSharp是对NetCore平台扩展的一个图像处理方案&#xff0c;以往网上的案例多以生成文字及画出简单图形、验证码等方式进行探讨和实践。 今天我分享一下所在公司项目的实际应用案例&#xff0c;导出微信二维码图片&#xff0c;圆形头像等等。 一、源码获取 Git项目地址&…

vue2工程

vue当然可以使用script标签引入&#xff0c;不需任何依赖即可按照vue的语法进行使用。但中大型商用项目中&#xff0c;还是建议使用工程化方式使用vue&#xff0c;vue提供了官方脚手架vue-cli&#xff0c;可以快速构建vue项目&#xff0c;脚手架会帮助开发者创建好建议的工程目…

flutte的第一个hello world程序

用命令行创建项目&#xff1a; flutter create flutterdemo VSCode或者AS连接手机后 输入 flutter run 编译后就可以将默认的代码显示在手机上了 开始写hello world 代码&#xff0c;这段代码写在根目录\lib\main.dart文件中&#xff0c;也是Flutter主文件。 整个代码如下 impo…

Ajax 设置Access-Control-Allow-Origin实现跨域访问

之前遇到的问题整理 ajax跨域访问是一个老问题了&#xff0c;解决方法很多&#xff0c;比较常用的是JSONP方法&#xff0c;JSONP方法是一种非官方方法&#xff0c;而且这种方法只支持GET方式&#xff0c;不如POST方式安全。 即使使用jquery的jsonp方法&#xff0c;type设为POST…