本地存储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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
android上传图片到PHP的过程详解
2015/08/03 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
js DOM模型操作
2009/12/28 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
投标邀请书范文
2014/01/31 职场文书
安全生产先进个人材料
2014/02/06 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
政府法律服务方案
2014/06/14 职场文书
材料化学专业求职信
2014/07/15 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
小学新教师个人总结
2015/02/05 职场文书
个人培训总结
2015/03/05 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL