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 也不是同一个域,因为协议不一样