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 也不是同一个域,因为协议不一样
- 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 数组属性和方法
- Vue+SpringBoot项目实战(一) 搭建环境
- kubernetes(十九) Ceph存储入门
- Java并发编程(8)- 应用限流及其常见算法
- 字符集其实很简单
- kubernetes(二十)SpringCloud微服务容器化迁移
- HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!
- kubernetes(七) 二进制部署k8s(1.18.4版本)
- Java并发编程(7)- 线程调度 - 线程池
- Java并发编程(6)- J.U.C组件拓展
- Java并发编程(5)- J.U.C之AQS及其相关组件详解
- Python+selenium 自动化-启用带插件的chrome浏览器,调用浏览器带插件,浏览器加载配置信息。
- Java并发编程(4)- 线程安全策略
- Java并发编程(3)- 如何安全发布对象
- Python 技术篇-3行代码实现语音朗读,pywin32库实现语音朗读
- Java并发编程(2)- 线程安全性详解