项目首次打开弹出提示页面效果

参考：https://its401.com/article/qq_39109182/88035357

文章目录

• • 1.localStorage（本地存储）和sessionStorage（会话存储）的基本介绍
  • • 生命周期
    • 存储
  • 2. 实现首次登录弹窗效果代码
  • 3.实现思路

1.localStorage（本地存储）和sessionStorage（会话存储）的基本介绍

生命周期

localStorage

• localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
• localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage

• sessionStorage的生命周期是在仅在当前会话下有效。
• sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口/同一个页面，sessionStorage也是不一样的。

存储

• 存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
• 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
• 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
• 获取方式：localStorage：window.localStorage; sessionStorage：window.sessionStorage;
• 应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
• WebStorage（Web Storage分两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。）提供的方法，数据操作比cookie方便，setItem (key, value) —— 保存数据，以键值对的方式储存信息；getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。removeItem (key) —— 删除单个数据，根据键值移除对应的信息。clear () —— 删除所有的数据；key (index) —— 获取某个索引的key

2. 实现首次登录弹窗效果代码

sessionStorage

if(!window.sessionStorage.getItem('storge')){
    alert('弹窗');
    window.sessionStorage.setItem('storge','true')
}

localStorage

if(!window.localStorage.getItem('storge')){
    alert('弹窗');
    window.localStorage.setItem('storge','true')
}

3.实现思路

根据迭代时间生成ID，迭代以后判断是否存在ID，存在则不显示提示

不存在则先删除全部ID存储数据，然后添加最新ID值。