本地存储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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
原生JavaScript实现进度条
Feb 19 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
杏林同学录(八)
2006/10/09 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
决心书格式及范文
2019/06/24 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis