js知识点积累 sessionStorage和localStorage的使用

sessionStorage和localStorage的使用

 

前言

这是学习笔记，把从别人博客里转载的https://www.cnblogs.com/wangyue99599/p/9088904.html

目的

是为了清楚的记住这两个知识点，有案例，便于记忆。

1 sessionStorage

需求：首先从后台获取得到一个URL地址，根据路由判断，用户一进入页面显示出一个蒙层，当用户进入当前页面的其他页面再返回时需要使蒙层消失，这时候就使用到了sessionStorage以及它的特性 浏览器关闭时自动销毁，成功解决；

2 localStorage

需求：页面有一个客服入口，每次进入客服时都要请求一次用户信息传给客服，这时候用到了localStorage，用户第一次进入客服时将用户信息保存在浏览器中，这样用户每次进入客服时后台都会直接获取到用户信息

区别

sessionStorage 浏览器关闭时自动销毁

localStorage 存储在浏览器中，无期限

sessionStorage用法

// 保存或设置数据到sessionStorage
    sessionStorage.setItem('key','value')
    
// 获取某个sessionStorage
    sessionStorage.getItem('key') // 从sessionStorage删除某个保存的数据 sessionStorage.removeItem('key') // 从sessionStorage删除所有保存的数据 sessionStorage.clear();

localStorage用法

// 保存或设置数据到localStorage
    localStorage.setItem('key','value')
    
// 获取某个localStorage localStorage.getItem('key') // 从localStorage删除某个保存的数据 localStorage.removeItem('key') // 从localStorage删除所有保存的数据 localStorage.clear();

前言

这是学习笔记，把从别人博客里转载的https://www.cnblogs.com/wangyue99599/p/9088904.html

目的

是为了清楚的记住这两个知识点，有案例，便于记忆。

1 sessionStorage

需求：首先从后台获取得到一个URL地址，根据路由判断，用户一进入页面显示出一个蒙层，当用户进入当前页面的其他页面再返回时需要使蒙层消失，这时候就使用到了sessionStorage以及它的特性 浏览器关闭时自动销毁，成功解决；

2 localStorage

需求：页面有一个客服入口，每次进入客服时都要请求一次用户信息传给客服，这时候用到了localStorage，用户第一次进入客服时将用户信息保存在浏览器中，这样用户每次进入客服时后台都会直接获取到用户信息

区别

sessionStorage 浏览器关闭时自动销毁

localStorage 存储在浏览器中，无期限

sessionStorage用法

// 保存或设置数据到sessionStorage
    sessionStorage.setItem('key','value')
    
// 获取某个sessionStorage
    sessionStorage.getItem('key') // 从sessionStorage删除某个保存的数据 sessionStorage.removeItem('key') // 从sessionStorage删除所有保存的数据 sessionStorage.clear();

localStorage用法

// 保存或设置数据到localStorage
    localStorage.setItem('key','value')
    
// 获取某个localStorage localStorage.getItem('key') // 从localStorage删除某个保存的数据 localStorage.removeItem('key') // 从localStorage删除所有保存的数据 localStorage.clear();