关于导出.txt保存网页指定参数，以及使用cookie保存网页指定参数

最新推荐文章于 2024-05-21 14:15:14 发布

枭飞

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量505

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43955005/article/details/126668567

版权

前言

项目需求：网页中有若干参数，需要一个按钮“export”。当点击“export”时，导出参数以对参数进行分析。另一个按钮“import”，点击时将之前参数导入（.txt方法没有实现这个功能）。

正文

那么，针对该需求我们至少有两种方法（这两种方法对于pc端、Android端、ios端均适用）：

1、网上大部分方法是直接把参数收集起来，最后放入.txt，然后导出。

2、当数据量较少（顶多4KB），或者不方便下载.txt或者之后要再读取保存的参数到网页的时候。我们可以将参数保存在网页的cookie中，由浏览器代我们保存。

方法一保存文件法

该方法网上相当多的文章有介绍，如：

https://www.feiniaomy.com/post/791.html

这里就不多介绍了，大概关键在于：

var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);

方法二使用cookie

1.cookie性质

在使用这个方法前，你首先要知道的是cookie的性质：

1、每个网址有浏览器为其预留的cookie空间，因此cookie的“path”属性尤为重要。

2、每个网址并不是只有一个cookie，而是有许多cookie。每个cookie都是一个String形如：

“cookieName = cookieContent”

严谨来说，其实每条cookie包含不会显示的属性(但是你可以访问得到，也可以设置)：过期时间“expires”，以及所属路径“path”.因此一条完整的cookie如下所示：

“cookieName = cookieContent ; expires = (某个时间) ; path=/"

于是一个页面的许多条cookie放在一起是这样的：

document.cookie="cookiename1 = cookies1Content ; cookiename2 = cookies2Content ； cookiename3 = cookies3Content"

你可以通过cookiename来访问对应cookie。当当前时间超过某cookie的expires属性中的时间时，对应的cookie会被删除。

2.访问该网址的cookie们

var strCookie=document.cookie;

可以看到是通过“document.cookie=”来访问整个页面的所有cookie，比较interesting的事情是添加新cookie记录也是用的这个，更interesting的事情是，设置已知的一条cookie用的也是这个。。。

3.添加一条cookie

添加一条新cookie的方法是：

var expdate = new Date();   //cookie保留时间
expdate.setTime(expdate.getTime() + 7 * 24 * 60 * 60 * 1000);   //时间单位毫秒，这里设定的是7天
document.cookie ="paraName1" + "=" + para1 + ";expires=" + expdate.toGMTString() + ";path=/";
 //path 是要保存到哪些页面的cookic，其子域名都可以访问其cookice

值得注意的是：添加新cookie不会对其他cookie产生影响。

4.设置某条cookie

设置某条cookie完全依赖于“cookieName”。那么比如你现在要删除某条cookie，可以修改该cookie的过期时间为早于现在时间，那么浏览器就会自动帮你删除（只能用这个方法实现删除cookie）：

var exp = new Date(); 
exp.setTime(exp.getTime()-1); //exp.getTime()是现在时间
document.cookie = "paraName1 = (随便填点什么都行，只要paraName1对了它就能找到对应cookie)"+";expires=" + exp.toGMTString()+ ";path=/" ;//一定要写";path=/"！！

5.终于要讲我怎么实现项目需求了

首先，将当前参数保存到cookie，我们需要先将之前的cookie们删掉（无论之前保存的参数也好，还是浏览器自带的乱七八糟的cookie也好）。

其次，我把好多参数放在一个cookie里，形如：

"paraName1=88|paraName2=23"

以这条cookie为例，cookieName就是“paraName1”，cookieContent是“88|paraName2=23”。嘿嘿，偷了个懒，都放在一个里面了。

那么，读取所需参数时就可以这样：

var arr = document.cookie.split('|');//将各个参数切出来,此时document.cookie="paraName1=88|paraName2=23"
var para1=arr[0].split("=")[1];          
var para2=arr[1].split("=")[1];

其中大量用到split函数，不清楚的可以查查。

当然，你完全可以把每个参数放不同的cookie中，用这样的方法获取对应cookie中保存的值：

function getCookie(cookieName){
	var cookieStr = unescape(document.cookie);
	var arr = cookieStr.split("; ");
	var cookieValue = "";
	for(var i=0;i<arr.length;i++){
		var temp = arr[i].split("=");
		if(temp[0]==cookieName){
			cookieValue = temp[1];
			break;
		}
	}
	return cookieValue;
}
————————————————
版权声明：本文为CSDN博主「xiahuaxuanlan1113」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chenwei1113/article/details/79648650

完整代码

all right，以下是某个完整代码实例（给你们演示用的）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
    <p>此网页的功能是点击export按钮，将para1和para2存入该网页cookie，下一次访问该网页时点击import则将两变量导入并显示。 </p>
    <p>注：可惜的是cookie差不多提供4KB的空间</p>
    <p> </p>

    <div>para1:<p id="para1"></p></div>
    <div>para2:<p id="para2"></p></div>

    <button id="button1" onclick="exportPara()" style="width:50px;height:20px">export </button>
    <button id="button2" onclick="importPara()" style="width:50px;height:20px">import </button>

    <script type="text/javascript" >

        var para1 = 88;//两个要存储的参数
        var para2 = 23;

        function exportPara(){

            delAllCookie();//删除之前cookie,即上一次保存的参数值
            
            var expdate = new Date();   //cookie保留时间
            expdate.setTime(expdate.getTime() + 7 * 24 * 60 * 60 * 1000);   //时间单位毫秒，这里设定的是7天
            var exp = new Date(); 
            exp.setTime(exp.getTime()-1); 

            document.cookie ="paraName1" + "=" + para1 + "|"+"paraName2" + "=" + para2 + ";expires=" + expdate.toGMTString() + ";path=/";          
            //path 是要保存到哪些页面的cookic，其子域名都可以访问其cookice                        
        };

        function importPara(){
            if (document.cookie.length>0){ 
                var arr = document.cookie.split('|');//将各个参数切出来,此时document.cookie="paraName1=88|paraName2=23"
                document.getElementById("para1").innerHTML=arr[0].split("=")[1];          
                document.getElementById("para2").innerHTML=arr[1].split("=")[1];          
                              
            }
             else console.log("内容已失效") ;
        }

        function delAllCookie(){
            var strCookie=document.cookie;
			var arrCookie=strCookie.split("; "); // document.cookie 是 string，将多cookie切割为多个“键=值”对
            var exp = new Date(); 
            exp.setTime(exp.getTime()-1); 

			for(var i=0;i <arrCookie.length;i++)
			{ // 遍历cookie数组，处理每个cookie对
                console.log("sasa",arrCookie[i])
                document.cookie = arrCookie[i]+";expires=" + exp.toGMTString()+ ";path=/" ;
                console.log(document.cookie)
			}
        }

    </script>
</body>

枭飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于导出.txt保存网页指定参数，以及使用cookie保存网页指定参数

项目需求：网页中有若干参数，需要一个按钮“export”。当点击“export”时，导出参数以对参数进行分析。另一个按钮“import”，点击时将之前参数导入（.txt方法没有实现这个功能）。
复制链接

扫一扫