의사 클래스 visited를 localStorage를 사용하여 장식
visited 는, 프라이버시상의 이유로, 특정의 프로퍼티 (색에 관한 것) 밖에 이용할 수 없습니다.: visited - CSS | MDN
내가 하고 싶었던 것은 아이콘 폰트를 사용해 체크 마크를
before이런 느낌↓
그러나
visited 는 의사 클래스에도 대응하고 있지 않습니다.a:visited:before {
content: "これは適用されません";
}
이 문제를 해결하기 위해 쿠키로 방문을 판별하는 방법이 나왔습니다.
「라이브러리 넣는 것 귀찮아」
"요청이 늘어나는 게 싫다"
그래서
localStorage 를 사용해 보았습니다.코드
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<body>
<ul>
<li><a href="//localhost:3000/test/">未訪問</a></li>
<li><a href="//localhost:3000/">訪問済み</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
style.scssul {
list-style: none;
}
a {
&:before {
content: "\f096";
font-family: "FontAwesome";
margin-right: 0.5em;
}
&.visited {
&:before {
content: "\f046";
}
}
}
style.cssul {
list-style: none;
}
a:before {
content: "\f096";
font-family: "FontAwesome";
margin-right: 0.5em;
}
a.visited:before {
content: "\f046";
}
script.js(jQuery)$(function(){
var nowLocation = location.href;
localStorage.setItem(nowLocation, nowLocation);
$('a').each(function(){
var anchorHref = $(this).prop('href');
var anchorHref = anchorHref.replace(/(index.html|index.php)/gi,'');
if( localStorage.getItem(anchorHref) == anchorHref ){
$(this).addClass('visited');
}
});
});
메커니즘
location.href 에서 현재 URL을 가져옵니다.location.href 를 localStorage 에 넣습니다. 방문한 모든 페이지가 localStorage에 있습니다.a 의 수만큼 루프합니다.$(this).prop('href'); 에서 href 값을 선택하고 anchorHref.replace 로 표기의 편차를 수정합니다.
수정된 href 의 값이 localStorage 안에 있으면 class="visited" 를 추가하여 완료.
해결할 수 없는 것
외부 사이트는 데이터를 저장할 수 없으므로 판별할 수 없습니다.
나누기와 거기가 넥인데, 이번에는 내가 사용한 것은 문제가되지 않았습니다.
HTML5를 지원하지 않는 브라우저는 localStorage를 사용할 수 없습니다. 또한 일부 환경에서는 용량에 제한이 있습니다(수량은 무제한).
일부 환경에서 프라이빗 브라우징 시에는 잘 동작하지 않습니다.
Safari의 개인 브라우징에서 WebStorage를 사용할 수없는 행동 및 해결
마지막
visited 하지만 색만 변경할 수 있는 것을 알고 있어 무리하게 뇌가 잊은 것 같습니다.
사소한 일이었습니다만, 모야모야한 기분이 되었으므로 적용시켜 보았습니다.
Reference
이 문제에 관하여(의사 클래스 visited를 localStorage를 사용하여 장식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tsuka-rinorino/items/945bab08391b336bc9f2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<body>
<ul>
<li><a href="//localhost:3000/test/">未訪問</a></li>
<li><a href="//localhost:3000/">訪問済み</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
ul {
list-style: none;
}
a {
&:before {
content: "\f096";
font-family: "FontAwesome";
margin-right: 0.5em;
}
&.visited {
&:before {
content: "\f046";
}
}
}
ul {
list-style: none;
}
a:before {
content: "\f096";
font-family: "FontAwesome";
margin-right: 0.5em;
}
a.visited:before {
content: "\f046";
}
$(function(){
var nowLocation = location.href;
localStorage.setItem(nowLocation, nowLocation);
$('a').each(function(){
var anchorHref = $(this).prop('href');
var anchorHref = anchorHref.replace(/(index.html|index.php)/gi,'');
if( localStorage.getItem(anchorHref) == anchorHref ){
$(this).addClass('visited');
}
});
});
Reference
이 문제에 관하여(의사 클래스 visited를 localStorage를 사용하여 장식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tsuka-rinorino/items/945bab08391b336bc9f2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
