最近一个项目,在iphone手机的safari浏览器中无法删除cookie,为了排查问题,特别编辑了一个专门用于显示cookie的html页面。
*代码复制到项目直接可用。
cookie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}
</style>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cookie</title>
</head>
<body>
<div id="myCookies">
<h1>Cookies</h1>
<table border="1px" style="width:100%;">
<thead>
<tr style="text-align: center;">
<td >No</td>
<td>Name</td>
<td>Value</td>
<td>Domain</td>
<td>Path</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr v-if="data.length==0"><td colspan="6">no cookie</td></tr>
<tr v-for="(obj,index) in data">
<td style="text-align: center;">{
{index+1}}</td>
<td>{
{obj.Name}}</td>
<td>{
{obj.Value}}</td>
<td>{
{obj.Domain}}</td>
<td>{
{obj.Path}}</td>
<td style="text-align: center;"><button @click="delCookie(obj.Name)">del</button></td>
</tr>
</tbody>
</table>
<br>
<button onclick="clearAllCookie()">clear all cookies({
{data.length}})</button>
<br><br>
</div>
</body>
<!-- <script type="text/javascript" src="./js/js.cookie.min.js"></script>
<script src="./res/vue/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var myCookies = {
data : [ /* {
"Name" : 240951.0,
"Value" : 0,
"Domain" : "",
"Path" : ""
} */ ]
};
var app = new Vue({
el : '#myCookies',
data : myCookies,
methods : {
delCookie:function(name){
var hostname = window.location.hostname;
var arr = hostname.split(".");
var domainName2 = arr[arr.length - 2] + "." + arr[arr.length - 1];//主域名
delCookie2(name,domainName2);
showAllCookie();
}
}
});
showAllCookie();
function showAllCookie() {
var arr=[];
if(document.cookie.length==0){
myCookies.data=[];
return;
}
var aCookie = document.cookie.split(";");
for (var i = 0; i < aCookie.length; i++) {
var aCrumb = aCookie[i].split("=");
var key = aCrumb[0].toString();
var val = aCrumb[1].toString();
var obj=new Object();
obj.Name=key;
obj.Value=val;
arr[arr.length]=obj;
}
myCookies.data=arr;
}
function clearAllCookie() {
if(document.cookie.length==0){
alert("no cookie");
return;
}
var hostname = window.location.hostname;
var arr = hostname.split(".");
var domainName2 = arr[arr.length - 2] + "." + arr[arr.length - 1];//主域名
var aCookie = document.cookie.split(";");
for (var i = 0; i < aCookie.length; i++) {
var aCrumb = aCookie[i].split("=");
var key = aCrumb[0].toString();
//var flag=Cookies.remove(key);
delCookie2(key, domainName2);
console.log("del cookie:key=" + key);
}
if(confirm("clear cookie success,do you want to reload page?")){
showAllCookie();
}
}
function delCookie2(name, domain) {
document.cookie = name + '=' + Cookies.get(name) + ';expires='
+ (new Date(1)) + ';max-age=0;domain=' + domain + ';path=/';
}
</script>
</html>