cookie的显示和删除

最近一个项目，在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>
*代码复制到项目直接可用。

运行时的前端显示

おすすめ
