原生js实现对cookie的增删改查

最新推荐文章于 2022-11-16 09:49:03 发布
VIP文章 最新推荐文章于 2022-11-16 09:49:03 发布
阅读量948 收藏 2
点赞数
分类专栏： 常用功能 js 文章标签： cookie javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tomhs3000/article/details/79629051
版权

在某些场景中，我们需要对cookie进行一些操作，但是却又并不希望对cookie的操作进行封装的时候，就可以使用原生js对其进行一些操作。

一、设置cookie

1、每个cookie都是一个键/值对，键/值对用等号连接，并将该键/值对赋值给document.cookie即可。如：document.cookie="_uid=111";

2、如果是通过变量来保存值，则可以通过document.cookie="_uid="+uid;来设置

二、读取cookie

function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)){
        return unescape(arr[2]);
    }else return null;
}

三、删除cookie 


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Tomhs3000
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
移动端复制按钮(点击复制，clipboard.js)

				
			

			

				

					往后橘生
				

				

					09-22
					
					1万+
					
				

			

		

		

			
				
移动端复制按钮实现，clipboard.js

			
		

	



                

              
                



	

		

			

				
					
vue-lazyload 懒加载 一些注意事项

				
			

			

				

					往后橘生
				

				

					06-29
					
					1万+
					
				

			

		

		

			
				
一、简介懒加载可以说的上是很基础的功能了，但是平时也用的非常广泛。在vue中有很多懒加载的插件，今天给大家带来一个我比较常用的插件的一些注意事项。二、安装$ npm install vue-lazyload -D三、官方链接这里附上官方文档链接 vue-lazyload四、注意事项栗子代码(此处将本地图片地址改为了接口请求到的图片地址，其他同官方文档)<div v-lazy-containe...

			
		

	



                


  
              

                


	

		

			

				
					
cookie介绍：cookie实现增删改查功能

				
			

			

				

					YY的博客
				

				

					11-16
					
					829
					
				

			

		

		

			
				
cookie介绍：cookie实现增删改查功能

			
		

	





	

		

			

				
					
原生js制作数据表格（增删改查移动）

				
			

			

				

					10-24
				

			

		

		

			
				
利用原生js制作的仿后端数据表，基本功能实现，详情请看博文

			
		

	



		

			
		



	

		

			

				
					
通过js实现cookies 的增删改查

				
			

			

				

					02-07
				

			

		

		

			
				
通过js实现cookies 的增加删除修改，解决chrome读为 undefine 的问题

			
		

	





	

		

			

				
					
js操作cookie（增删改查）

				
			

			

				

					04-09
				

			

		

		

			
				
NULL
博文链接：https://zhaoshijie.iteye.com/blog/1626408

			
		

	





	

		

			

				
					
jdbc实现增删改查.rar

				
			

			

				

					09-01
				

			

		

		

			
				
使用jquery easyui和原生jdbc实现 增删改查以及分页显示

			
		

	





	

		

			

				
					
js 原生方法操作 cookie 详解

				
			

			

				

					
				

				

					12-16
					
					5228
					
				

			

		

		

			
				
js 原生方法操作 cookie 详解
客户端存储小型数据的方式有 cookie 和 storage 两种
这两种存储方式都是基于站点的，也就是说不同的站点有不同的cookie和storage

cookie
是 document 的属性，也就是 window.document.cookie
用于存储小的数据，如 username email uuid token等，并可以设置数据的过期时间


...

			
		

	





	

		

			

				
					
JS方法篇：清除所有cookie

					
热门推荐

				
			

			

				

					rxq134836的博客
				

				

					11-20
					
					2万+
					
				

			

		

		

			
				
//清空cookie
		function clearCookie() {
			var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
			if (keys) {
				for (var i = keys.length; i--;) {
					document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString();//清除当前域名下的,例如：m.kevis.com
..

			
		

	





	

		

			

				
					
js 原生cookie封装

				
			

			

				

					weixin_47790139的博客
				

				

					05-28
					
					609
					
				

			

		

		

			
				
文章目录原生cookie的使用cookie存储cookie获取cookie修改cookie删除cookie封装cookie简单使用cookie封装工具类
原生cookie的使用
cookie存储
document.cookie = "name=111";

cookie获取
//存储cookies
document.cookie = "name=111";
//获取cookies
var cookies = document.cookie;
console.log(cookies);

cookie修改
/

			
		

	





	

		

			

				
					
原生js操作cookie

				
			

			

				

					qq_43248623的博客
				

				

					08-13
					
					505
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <titl

			
		

	





	

		

			

				
					
jsp+servlet+jdbc原生实现增删改查两张表

				
			

			

				

					07-04
				

			

		

		

			
				
原生实现jsp+servlet的增删改查，通过JDBC连接数据库。没有框架内容，适合初学者使用。代码结构清晰注释很详细，直接下载就可以放到环境中跑起来

			
		

	





	

		

			

				
					
php原生增删改查demo

				
			

			

				

					12-22
				

			

		

		

			
				
最简单的mysqli和pdo的连接方式 实现对数据库的增删改查.欢迎下载

			
		

	





	

		

			

				
					
JS实现清除指定cookies的方法

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了JS实现清除指定cookies的方法,在web程序设计中非常实用,需要的朋友可以参考下

			
		

	





	

		

			

				
					
JS操作Cookie,子键(增删改查)纯js页面

				
			

			

				

					08-25
				

			

		

		

			
				
当需要用cookie来存储大量数据的时候，用前台js来控制cookie, 然后异步调用后台执行一些数据库操作，实现页面无刷新。

			
		

	





	

		

			

				
					
js操作Cookie子键+Jquery调用Ajax方法执行后台操作

				
			

			

				

					08-25
				

			

		

		

			
				
js操作Cookie子键+Jquery调用Ajax方法执行后台操作 返回值给前台。详细注释 Demo

			
		

	





	

		

			

				
					
vue下实现复制功能

				
			

			

				

					往后橘生
				

				

					05-16
					
					1万+
					
				

			

		

		

			
				
一、说明：vue下想要实现复制功能有很多种方法，比如vue-clipboard2等。但是如果你不想使用插件，我们也可以利用document.execCommand来实现此功能。二、简介：当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。三、使用  methods: {
    CopyUrl(){
   ...

			
		

	





	

		

			

				
					
将图片转化为base64格式通过ajax传给后端

				
			

			

				

					往后橘生
				

				

					01-29
					
					1万+
					
				

			

		

		

			
				
最近在做注册登录系统时，需要传图片给后端，因为native直接用的base64格式的。所以我们需要做的就是将 用户上传的图片预览出来，同时转化为base64格式通过ajax传给后端。
废话不多说直接上代码
第一步，我们需要将input file的文件提取img标签可以识别的url。
//建立一個可存取到該file的url
function getObjectURL(file) {
	var 

			
		

	





	

		

			

				
					
原生dom实现增删改查，全选反选

					
最新发布

				
			

			

				

					06-13
				

			

		

		

			
				
好的，下面是原生DOM实现增删改查、全选反选的示例代码：

```html
<!DOCTYPE html>
<html>
<head>
	<title>DOM增删改查、全选反选</title>
</head>
<body>
	<h3>DOM增删改查、全选反选示例</h3>

	<!-- 添加元素 -->
	<input type="text" id="add-input">
	<button id="add-btn">添加</button>

	<!-- 显示元素列表 -->
	<ul id="list"></ul>

	<!-- 删除元素 -->
	<button id="delete-btn">删除</button>

	<!-- 修改元素 -->
	<input type="text" id="edit-input">
	<button id="edit-btn">修改</button>

	<!-- 全选反选 -->
	<input type="checkbox" id="check-all">
	<label for="check-all">全选/反选</label>

	<script>
		// 先获取相关的DOM元素
		var addInput = document.getElementById('add-input');
		var addBtn = document.getElementById('add-btn');
		var list = document.getElementById('list');
		var deleteBtn = document.getElementById('delete-btn');
		var editInput = document.getElementById('edit-input');
		var editBtn = document.getElementById('edit-btn');
		var checkAll = document.getElementById('check-all');

		// 添加元素
		addBtn.onclick = function() {
			var text = addInput.value.trim();
			if (text) {
				var li = document.createElement('li');
				li.innerHTML = '<input type="checkbox"> ' + text;
				list.appendChild(li);
				addInput.value = '';
			}
		};

		// 删除元素
		deleteBtn.onclick = function() {
			var checkboxes = list.getElementsByTagName('input');
			for (var i = checkboxes.length - 1; i >= 0; i--) {
				if (checkboxes[i].checked) {
					list.removeChild(checkboxes[i].parentNode);
				}
			}
		};

		// 修改元素
		editBtn.onclick = function() {
			var checkboxes = list.getElementsByTagName('input');
			for (var i = checkboxes.length - 1; i >= 0; i--) {
				if (checkboxes[i].checked) {
					var text = editInput.value.trim();
					if (text) {
						checkboxes[i].parentNode.innerHTML = '<input type="checkbox"> ' + text;
						editInput.value = '';
					}
				}
			}
		};

		// 全选反选
		checkAll.onclick = function() {
			var checkboxes = list.getElementsByTagName('input');
			for (var i = checkboxes.length - 1; i >= 0; i--) {
				checkboxes[i].checked = checkAll.checked;
			}
		};
	</script>
</body>
</html>
```

这个示例实现了以下功能：

1. 输入框输入内容后，点击“添加”按钮可以将内容添加到列表中。
2. 点击“删除”按钮可以删除列表中选中的元素。
3. 输入框输入内容后，点击“修改”按钮可以将列表中选中的元素的文本修改为输入框中的内容。
4. 点击“全选/反选”复选框可以全选或反选列表中的所有元素。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值