H5-locaStorage解析

- - 浅谈cookie
  - 浅谈localStorage
  - 深入解析localStorage
  - 浅谈sessionStorage
  - cookie， loaclStorage，sessionStorage的区别
  - 我们在谈谈什么是同一个域

我们先说说localStorage是做什么用的

用来存取数据，是一种缓存结构，说到缓存我们之前不是有cookie了吗，为什么还要用localStorage？

我们从下面的例子来看看把

浅谈cookie

cookie的缺点：
1. 每次ajax向后台请求数据的时候，都会朝后端发送所有cookie
2. 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 也不是同一个域，因为协议不一样