H5-locaStorage解析
时间:2022-07-25
本文章向大家介绍H5-locaStorage解析,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
H5-locaStorage解析
我们先说说localStorage是做什么用的 用来存取数据,是一种缓存结构,说到缓存我们之前不是有cookie了吗,为什么还要用localStorage? 我们从下面的例子来看看把
浅谈cookie
- cookie的缺点:
- 每次ajax向后台请求数据的时候,都会朝后端发送所有cookie
- cookie存储的大小有限制,只有4kb;
浅谈localStorage
- 往localStorage中存储东西
localStorage.name = "zhangsan";
localStorage.setItem("age", 18);
上述的两种方式都可以往localStorage中存值
- 我们如何取存在localStorage中的值呢
console.log(localStorage.name);
console.log(localStorage.getItem("age"));
也可以获取到
- 我们再来看看删除localStorage中的某一项值
localStorage.removeItem("age");
移除了age后,就只剩name了
深入解析localStorage
特点
- ajax发送数据的时候不会带有localStorage存的值
- localStorage存的值都是以字符串的方式来存的
- localStorage能存的大小在5m左右
- localStorage只能在相同域中使用
先看一下第二个特点,只能存入字符串
localStorage.arr = arr;
localStorage.obj = obj;
console.log(localStorage.arr);
console.log(localStorage.obj);
从控制台,我们可以看到localStorage中存入和我们想象的并不太一样 再看看打印结果
从上述现象中我们可以找到以下特点:
- 存入的数组变成了散列的值
- 存入的对象被调用了Object.prototype.toString()方法,返回了一个对象的类型
那我们如何向localStorage中存入对象和数组呢
localStorage.arr = JSON.stringify(arr);
localStorage.obj = JSON.stringify(obj);
console.log(JSON.parse(localStorage.arr));
console.log(JSON.parse(localStorage.obj))
我们根据localStorage的特点,存入json的字符串即可,使用的时候再转义回来即可
浅谈sessionStorage
- sessionStorage在使用上和localStorage基本上一样
cookie, loaclStorage,sessionStorage的区别
- cookie和localStorage做比较
项目 |
大小限制 |
是否往后台发送数据 |
存取特点 |
只能在同一域下使用 |
过期时间 |
---|---|---|---|---|---|
cookie |
4kb |
是 |
都可以存 |
是 |
超过设置的时间过期 |
loaclStorage |
5M |
否 |
只能存字符串 |
是 |
可以存很久,窗口关闭还在 |
sessionStorage |
2M |
否 |
只能存字符串 |
是 |
一个会话的时间,窗口关闭消失 |
我们在谈谈什么是同一个域
同一个协议, 同一个域名, 同一个端口 www.baidu.com这不是一个域,因为不是一个域名 http://www.baidu.com 和 https://www.baidu.com 也不是同一个域,因为协议不一样
- [WCF安全系列]绑定、安全模式与客户端凭证类型:WSHttpBinding与WSDualHttpBinding
- Python中list的遍历
- Python中的参数传递与解析
- [WCF安全系列]实例演示:TLS/SSL在WCF中的应用[HTTPS]
- QEMU3 - 使用ceph来存储QEMU镜像
- Redis错误配置详解
- 顺序存储线性表的实现
- 技术揭秘:什么是定位劫持?黑客是如何进行劫持攻击的?
- CSS概要
- 如何使用 scikit-learn 为机器学习准备文本数据
- 使用jQuery Validation插件来验证表单
- 如何用Wireshark捕获USB数据?
- QEMU 2: 参数解析
- [WCF安全系列]认证与凭证:X.509证书
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一分钟学Python|Python的字典
- MySQL information_schema详解 ENGINES
- 一日一技:不用轮询,基于事件监控文件变动
- Python 基础(十七):装饰器
- XtraBackup工具详解 Part 10 使用innobackupex对数据库进行部分备份(指定表或数据库)
- Python 基础(十九):数学相关模块
- XtraBackup工具详解 Part 11 使用innobackupex对部分备份进行恢复
- XtraBackup工具详解 Part 12 流式和压缩备份
- 基于STM32+RT-Thread的新冠肺炎疫情监控平台
- Python 基础(二十):sys 模块
- [Oracle 故障处理]记一次Windows监听启动失败
- Python 基础(二十一):argparse 模块
- LeetCode 4 题解
- 操作系统与 CPU 是怎么执行线程的?
- LeetCode 5 题解