本地存储localStorage用法详解


Posted in Javascript onJuly 31, 2017

一、什么是localStorage?

在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.clear()  // undefined   
 localStorage      //Storage {length: 0} 存储数据

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令 
localStorage // Storage{name: "caibin", length: 1} 读取数据

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
  console.log('localStorage里存储的第'+i+'条数据的名字为:'+localStorage.key(i)+',值为:'+localStorage.getItem(localStorage.key(i)));
}

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的,是在我当下环境里的,只是demo哦~
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex') // false

将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

将JSON存储到localStorage里

var students = {
  xiaomin: {
    name: "xiaoming",
    grade: 1
  },
  teemo: {
    name: "teemo",
    grade: 3
  }
}

students = JSON.stringify(students); //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 #Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 #Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 #Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 #Javascript
详解React中的组件通信问题
Jul 31 #Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 #Javascript
Angular.js中数组操作的方法教程
Jul 31 #Javascript
You might like
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JavaScript中的对象和原型(一)
2016/08/12 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
数据库基础的一些面试题
2012/02/25 面试题
大学生入党自我鉴定
2013/10/31 职场文书
硕士研究生自我鉴定
2013/11/08 职场文书
培训自我鉴定
2014/01/31 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
企业员工集体活动方案
2014/08/17 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
骨干教师申报材料
2014/12/17 职场文书
青年教师个人总结
2015/02/11 职场文书
护士节慰问信
2015/02/15 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
python实现会员信息管理系统(List)
2022/03/18 Python
详解Python flask的前后端交互
2022/03/31 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸