H5-locaStorage解析

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

特点

1. ajax发送数据的时候不会带有localStorage存的值
2. localStorage存的值都是以字符串的方式来存的
3. localStorage能存的大小在5m左右
4. 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做比较

我们在谈谈什么是同一个域

同一个协议， 同一个域名， 同一个端口 www.baidu.com这不是一个域，因为不是一个域名 http://www.baidu.com 和 https://www.baidu.com 也不是同一个域，因为协议不一样