前端-弹窗公告不再提示功能

原创已于 2022-01-26 17:56:52 修改 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #json

于 2022-01-26 15:52:38 首次发布

react 同时被 2 个专栏收录

27 篇文章

订阅专栏

typescript

19 篇文章

订阅专栏

本文介绍了一种利用LocalStorage来管理网站通知Cookie的方法。通过自定义接口和函数实现通知的存储、读取及删除功能，并支持设置过期时间。文章详细展示了如何通过JavaScript操作LocalStorage来实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完整代码就不写了, 主要是使用localStorage存储; cookie也是可以的,需要传入清除时间,请自行查找资料

interface ICookie {
    cname:string;
     value:string; 
    endTime?: string|number; //是number时为时间戳
}

const setCookie= ({cname, value, endTime}:ICookie) => {
    let date:any = 0
    if(endTime) {
        date = formatDate(endTime);
    }
    let obj:any = JSON.parse(localStorage.noticeCookie||'{}');
    obj[cname] = {
        cname,
        value: base64.encode(value),
        time: date, 
    }
    localStorage.noticeCookie = JSON.stringify(obj);
  }
  // 获取cookie，传入key以获取value
  const getCookie = (cname='') => {
      const obj:any = JSON.parse(localStorage.noticeCookie||'{}');
      removeCookie(obj, cname);
      return obj[cname]?base64.decode(get(obj[cname], 'value')):'';
  }

  const removeCookie = (obj:any={}, cname) => {
    for(let key in obj) {
        const endTime = get(obj[key], 'time') || 0;
        if(!timeFlag(endTime)) {
            obj[key] && delete obj[key]
        }
    }
    localStorage.noticeCookie = JSON.stringify(obj);
  }

  const timeFlag= (endTime) => {
    let date:any = formatDate(endTime);
    const nowTime = formatDate();
    console.log(Number(date)>nowTime,Number(date),nowTime)
    return Number(date)>nowTime;
  }


const closeModal = (item: any = {}) => {
        const key0 = get(item, 'NOTICE_ID', '');
        const key = base64.encode(key0);
        const endTime = item.TIME_END;
        setCookie({
           cname:  `closeNotice${key}`,
           value: 'N',
           endTime,
        })
        onClickClose && onClickClose();
    };

    const showModal = item => {
        const key0 = get(item, 'NOTICE_ID', '');
        const key = base64.encode(key0);
        const endTime = item.TIME_END;
        if (item.TYPE === 'POP' && key) { // 组件内自定义存储数据判断
            console.log(getCookie(`closeNotice${key}`),'getCookie(`closeNotice${key}`)')
            if (getCookie(`closeNotice${key}`) !== 'N') {
                setCookie({
                    cname:  `closeNotice${key}`,
                    value: isShow ? 'Y':'N',
                    endTime,
                 })
            }
            else {
                closeModal();
            }
        }

    };

// 使用moment方法将时间转换为时间戳:

function formatDate(endTime?:string|number) {
    let date:any = new Date();
    if(endTime) {
        date = moment(endTime).unix() * 1000
    }
    return date;
}