javascript - 弹出存储在浏览器缓存中的用户决定

Question

我创建了一个从 json 检索数据并有两个接受和拒绝选项的弹出窗口，我希望在单击 accpet 后将用户的决定存储在浏览器的缓存中 24 小时，此外，单击接受弹出窗口消失并单击拒绝后页面会模糊帮助...

1. 链接到我的页面：https ://neqts.github.io/jsonpPrint/
2. 源代码链接：https ://github.com/neqts/jsonpPrint

"use strict"

console.log(json)
const getNames = (obj) => Object.values(obj).map(el => el.name)

const purposesNames = getNames(json.purposes)
const vendorsNames = getNames(json.vendors)
const specialFeaturesNames = getNames(json.specialFeatures)
const specialPurposesNames = getNames(json.specialPurposes)
const stacksNames = getNames(json.stacks)




let outputArr = []
window.onload = function main() {

  const add = document.createElement('div')
  add.setAttribute("id", "demo");
  const overall = document.createElement('div')
  Object.entries(json.vendors).forEach(vendor => {
    outputArr.push(vendor[1].policyUrl) 
  })







  const add2 = document.createElement('div')
  document.body.appendChild(add2)
  const h1 = document.createElement('h1')
  add2.appendChild(h1)

  h1.innerHTML="GDPR consent"
  h1.style.cssText=`
  display:flex;
  justify-content:center;
  `
  
  const p2 = document.createElement('p')
  add2.appendChild(p2)
  p2.innerHTML=vendorsNames
  add2.classList.add('names')
 
 


  overall.appendChild(add);
  document.body.style.overflow="hidden"
   document.body.style.backdropFilter="blur(7px)";
   document.body.style.margin="0px"
   document.body.style.padding="21px"
  document.body.style.justifyContent="center"
  document.body.appendChild(add);
  document.body.style.background = "url(https://www.hgsm.pl/wp-content/uploads/2017/03/Pattern-Blue-Dots-background-patterns-pattern-wallpapers-1920x1080.jpg)"
  var final = document.getElementById("demo");
  final.innerHTML = outputArr;



      
  const add3 = document.createElement('div')
  add3.classList.add('butons')
  document.body.appendChild(add3)
  const accept = document.createElement('button')
  add3.appendChild(accept)
  accept.classList.add('btn1')
  const reject = document.createElement('button')
  add3.appendChild(reject)
  reject.classList.add('btn2')
  accept.innerHTML="ACCEPT"
  reject.innerHTML="REJECT"

  accept.addEventListener("click",show)
  reject.addEventListener("click",hide)
   document.querySelector('.butons')


  function show() {
   add2.style.display="none"
   add3.style.display="none;"
   final.style.display="none"
   document.querySelector('.butons').style.display="none"
   document.body.style.backdropFilter="none"

    
  }
  
  function hide() {
    add2.style.display="none"
    add3.style.display="none;"
    final.style.display="none"
    document.querySelector('.butons').style.display="none"
    document.body.style.width="100%"
    document.body.style.height="130vh"
 
     
   }
 


  
  
  overall.style.cssText = `
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(7px);
    `;
  add.style.cssText = `
      display: flex;
      justify-content: center;
      align-items: center;
      width:90%;
      height: 90%;
      background: white;
      margin: 0 auto;
      font-size:7px;
    `;


    
  add2.style.cssText = `
  display: grid;
  justify-content: center;
  align-items: center;
  width:90%;
  height: 90%;
  background: white;
  margin: 0 auto;
  font-size:7px;
`;
add3.style.cssText = `
display: flex;
padding-top:20px;
padding-bottom:20px;
justify-content: center;
align-items: center;
width:90%;
height: 90%;
background: white;
margin: 0 auto;
font-size:7px;
`;
}

标签： javascriptjsonjsonp