79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { Link } from 'react-router-dom'
|
||
import './CookieConsent.css'
|
||
|
||
function CookieConsent() {
|
||
const [showConsent, setShowConsent] = useState(false)
|
||
|
||
useEffect(() => {
|
||
// 检查用户是否已经做出过选择
|
||
try {
|
||
const consent = localStorage.getItem('cookieConsent')
|
||
console.log('[CookieConsent] Checking localStorage, consent =', consent)
|
||
|
||
if (!consent) {
|
||
console.log('[CookieConsent] No consent found, will show after delay')
|
||
// 延迟显示，让页面先加载完成
|
||
const timer = setTimeout(() => {
|
||
console.log('[CookieConsent] Setting showConsent to true')
|
||
setShowConsent(true)
|
||
}, 1000) // 减少延迟时间到1秒
|
||
return () => {
|
||
console.log('[CookieConsent] Cleaning up timer')
|
||
clearTimeout(timer)
|
||
}
|
||
} else {
|
||
console.log('[CookieConsent] Consent already given, not showing. To test, clear localStorage: localStorage.removeItem("cookieConsent")')
|
||
}
|
||
} catch (error) {
|
||
console.error('[CookieConsent] Error accessing localStorage:', error)
|
||
// 如果localStorage不可用，仍然显示
|
||
const timer = setTimeout(() => {
|
||
setShowConsent(true)
|
||
}, 1000)
|
||
return () => clearTimeout(timer)
|
||
}
|
||
}, [])
|
||
|
||
const handleAccept = () => {
|
||
console.log('CookieConsent: User accepted')
|
||
localStorage.setItem('cookieConsent', 'accepted')
|
||
setShowConsent(false)
|
||
}
|
||
|
||
const handleReject = () => {
|
||
console.log('CookieConsent: User rejected')
|
||
localStorage.setItem('cookieConsent', 'rejected')
|
||
setShowConsent(false)
|
||
}
|
||
|
||
console.log('CookieConsent: Rendering, showConsent =', showConsent)
|
||
|
||
if (!showConsent) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="cookie-consent-overlay">
|
||
<div className="cookie-consent">
|
||
<div className="cookie-consent-content">
|
||
<h3 className="cookie-consent-title">Cookies</h3>
|
||
<p className="cookie-consent-text">
|
||
本网站使用 Cookies 以使您获得最佳的体验。为了继续浏览本网站，您需同意我们对 Cookies 的使用。想要了解更多有关于 Cookies 的信息，或不希望当您使用网站时出现 Cookies，请阅读我们的 <Link to="/privacy-policy" className="cookie-link">Cookies 声明</Link>。
|
||
</p>
|
||
</div>
|
||
<div className="cookie-consent-actions">
|
||
<button onClick={handleReject} className="cookie-btn cookie-btn-reject">
|
||
拒绝
|
||
</button>
|
||
<button onClick={handleAccept} className="cookie-btn cookie-btn-accept">
|
||
接受
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CookieConsent
|