H5本地存储(localStorage,sessionStorage)

本地存储

前言

当你从浏览器的角度想一下，以下代码会在浏览器当中执行什么？？

var a = 1;
console.log(a);//1

当打开浏览器，浏览器会解析标签和脚本做一些事情

1）当前通过谷歌浏览器打开了html页面解析了内部的使用标签和js脚本

2）在js脚本中发现当前声明了一个变量a，肯定是在内存中开辟空间存储着变量a中的数据1

3）然后就是console.log(a) 向内存中的变量a去取值发现存储变量a存储1那就会在控制台中打印1

当打开浏览器，会解析JS脚本，然后在全局GO对象中想一下会做什么事情

1）打开浏览器执行JS脚本会生成一个GO对象

2）然后GO对象中有一个变量a中的数字1是存储在内存中的

3）console.log a就是相当于 console.log GO对象中的a的值 发现是数字1我取出来了 然后就打印1

4）当关闭浏览器GO对象就会被销毁

var a = 1;
console.log(a);

当前变量a只能在当前的页面生成的时间内可以使用变量a(浏览器关闭就不能使用变量a了)

 es5中当浏览器的页面被关闭之后  JS脚本的所有数据都会从内存中销毁

在es5中JS脚本中的数据的生命周期只能在，当前这次页面存在时 那该怎么让这些数据关掉浏览器时依然存在呢？？

通过localStorage和sessionStorage就可以实现了

localStorage

基础知识

1. localStorage是JS中的内置对象，对象中的setItem他是一个函数 当函数执行他会接收两个参数

2. localStorage.setItem(属性名,属性值) 设置任意属性名值的属性值 数据存储在本地
3. localStorage.getItem(属性名) 获取指定存储在本地的属性值
4. localStorage.removeItem(属性名) 删除存在本地的所有数据（调用一次只能删除存在本地的一个数据）
5. localStorage.clear()        删除存在本地的所有数据

当在本地存储的是引用值时表现形式是一个字符串，那该怎么很好的拿到并且使用这个数据呢？

1. 用JSON.stringif(数据)方法作为存储数据的属性值

2. 然后在用JSON.parse(localStorage.getItem(属性名))调出存储好了的数据

查看存储到浏览器中的数据(即使你关闭浏览器他还会存在) Application面板 中的Local Storage选项就显示存储在浏览器中的数据了

Local Storage选项中的clear AII 就可以清楚掉使用存储在浏览器中的数据了

往本地存储数据并且获取到这个数据

//往本地存储两个数据
localStorage.setItem('name','huasheng');
localStorage.setItem('age',20);
//获取存储在本地的数据 即使关掉浏览器数据依然存在
console.log(localStorage.getItem('name'),localStorage.getItem('age'));

一旦执行了localStorage.getItem()这个函数 就是相当于你现在设置了一个变量把huasheng,20值存在浏览器中 即使下一次浏览器关闭了这个值也依然存在

往本地存储的是引用值的时候，那该怎么拿到这个数据

//往本地存储两个数据
localStorage.setItem('obj',{
    name:"huasheng",
    age:20,
});
localStorage.setItem('arr',[20,'huashneg',true,{}]);
//获取存储在本地的数据
console.log(localStorage.getItem('name'),localStorage.getItem('age'));

当往本地存储值的时候，存储引用值的时候 引用值会被隐式类型转换成一个字符串

当在本地存储的是引用值时那该怎么取出本地的数据？？

在把引用值存储在本地的时候需要 

1. 用JSON.stringif(数据)方法作为存储数据的属性值

2. 然后在用JSON.parse(localStorage.getItem(属性名))调出存储好了的数据

储存到本地

存储到本地的数据  会有隐式转换成字符串 所以在存储数据之前需要使用JSON.stringify(数据)

在用到存储的数据是引用值是在调用JSON.parse(数据)转换成可以使用的数据

//往本地存储两个数据
localStorage.setItem('obj',JSON.stringify({
    name: "huasheng",
    age: 20,
}));
// 用JSON.stringify把对象变成对象形式的字符串了 ，但是这个字符串仍然保留着对象的格式
// 不在是[Object,object]了 我们把这种字符串存储在本地
localStorage.setItem('arr',JSON.stringify([20,'huashneg',true,{}]));
//在用JSON.parse函数把对象格式的字符串转换成对象就可以使用了
console.log(JSON.parse(localStorage.getItem('obj')),JSON.parse(localStorage.getItem('arr')))

删除存储在本地的数据

//往本地存储两个数据
localStorage.setItem('obj',JSON.stringify({
    name: "huasheng",
    age: 20,
}));
localStorage.setItem('arr',JSON.stringify([20,'huashneg',true,{}]));
localStorage.removeItem('arr');//删除掉arr这个存储在本地的数据
console.log(JSON.parse(localStorage.getItem('obj')),JSON.parse(localStorage.getItem('arr')))

删除本地的所有数据

//往本地存储两个数据
localStorage.setItem('obj',JSON.stringify({
   name: "huasheng",
   age: 20,
}));
localStorage.setItem('arr',JSON.stringify([20,'huashneg',true,{}]));
localStorage.clear();//删除存在本地的所有数据
console.log(JSON.parse(localStorage.getItem('obj')),JSON.parse(localStorage.getItem('arr')))

学vue react框架的时候需要用到这些把某些数据存储在本地

sessionStorage

基本知识

1. sessionStorage是JS中的内置对象，对象中的setItem他是一个函数 当函数执行他会接收两个参数
2. sessionStorage.setItem(属性名,属性值)  设置任意属性名值的属性值 数据存储在本地

3. sessionStorage.getItem(属性名) 获取指定存储在本地的属性值

4. sessionStorage.removeItem(属性名)   删除存在本地的所有数据（调用一次只能删除存在本地的一个数据）

5. sessionStorage.clear()        删除存在本地的所有数据

 Application面板 中的Session Storage选项就显示存储在浏览器中的数据了

用sessionStorage.setItem往本地存储了一个数据

//往本地存储了一个数据
sessionStorage.setItem('name','huasheng');

为什么sessionStorage.setItem不会在关闭浏览器中存储数据

1.  当前加载JS脚本的时候内部是空的 使用说在上一次sessionStorage.setItem存储的数据 在你关闭浏览器的时候已经被清除掉了

2.  然后当前JS脚本没有存储任何的数据自然也就是空的了

存储数据时：localStorage||sessionStorage，和用var关键词声明的变量的区别

//用sessionStorage,localStorage往本地存储了一个数据
sessionStorage.setItem('name','huasheng');
localStorage.setItem('age',20);
//用var关键词生成了一个变量，并且存储一个数据
var num = 20;

localStorage和sessionStorage的区别

1. localStorage即使你关掉浏览器数据依然存在
2. sessionStorage我关掉浏览器存储在本地的数据就不复存在了

localStorage和sessionStorage和var关键词之间的区别

1. localStorage和sessionStorage存储的数据刷新页面也会依然存在数据
2. 用var 关键词声明的变量 刷新数据就不复存在了(刷新页面表示再次运行对应的文件)

用sessionStorage方法存储和删除本地数据

存储数据
 

//往本地存储了三个数据
sessionStorage.setItem('name','huasheng');
sessionStorage.setItem('age',20);
sessionStorage.setItem('person',JSON.stringify({
    name:'huasheng',
    age:20,
}))
//获取数据
console.log(sessionStorage.getItem('name'),sessionStorage.getItem('age'));
console.log(JSON.parse(sessionStorage.getItem('person')));

删除数据

sessionStorage.removeItem('name');//删除一个数据
sessionStorage.clear();//删除所有数据

localStorage  和  sessionStorage的区别(面试常问)

1.  localStorage存储数据的生命周期 是永久的(没有卸载浏览器的情况下)

2. sessionStorage存储数据的生命周期 在当前的这次页面没有被关闭 会一直存在

这两种方式都是数据持久化的方式(把数据存储在本地)