本地存储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 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Python如何读写字节数据
2020/08/05 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
什么是Rollback Segment
2013/04/22 面试题
实习鉴定评语
2014/01/19 职场文书
干部现实表现材料
2014/02/13 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
微电影大赛策划方案
2014/06/05 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书