h5~js~cookie(16)

最新推荐文章于 2024-09-27 15:27:45 发布
最新推荐文章于 2024-09-27 15:27:45 发布
阅读量121 收藏
点赞数
文章标签： javascript ViewUI

cookie的使用

Cookie的基本讲解

·         Cookies 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookies 的作用就是用于解决 "如何记录客户端的用户信息":
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。


Cookies 以名/值对形式存储，如下所示:

document.cookie="username=John Doe";



·         为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

 

·         使用 JavaScript 读取 Cookie

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;
 JavaScript 中，修改 cookies 类似于创建 cookies

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

·         删除 cookie 非常简单。只需要设置 expires 参数为以前的时间或当前时间即可，

   document.cookie=cname+"=;expires="+today.toUTCString();//通过cname找到存的值,改过期时间为现在时间

                                   

JS设置Cookie多种方式

方法一：（w3c官网的代码）

第一种（w3c官网的代码）

<script>

//设置cookie

function setCookie(cname, cvalue, exdays) {

    var d = new Date();

    d.setTime(d.getTime() + (exdays*24*60*60*1000));

    var expires = "expires="+d.toUTCString();

    document.cookie = cname + "=" + cvalue + "; " + expires;

}

//获取cookie

function getCookie(cname) {

    var name = cname + "=";

    var ca = document.cookie.split(';');

    for(var i=0; i<ca.length; i++) {

        var c = ca[i];

        while (c.charAt(0)==' ') c = c.substring(1);

        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);

    }

    return "";

}

//清除cookie 

function clearCookie(name) { 

    setCookie(name, "", -1); 

} 

function checkCookie() {

    var user = getCookie("username");

    if (user != "") {

        alert("Welcome again " + user);

    } else {

        user = prompt("Please enter your name:", "");

        if (user != "" && user != null) {

            setCookie("username", user, 365);

        }

    }

}

checkCookie();

</script>

 

 

方法二：

 

<script>

//JS操作cookies方法!

 

//写cookies

function setCookie(c_name, value, expiredays){

 　　　　var exdate=new Date();

　　　　exdate.setDate(exdate.getDate() + expiredays);

　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

 　　}

 

//读取cookies

function getCookie(name)

{

    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

 

    if(arr=document.cookie.match(reg))

 

        return (arr[2]);

    else

        return null;

}

 

//删除cookies

function delCookie(name)

{

    var exp = new Date();

    exp.setTime(exp.getTime() - 1);

    var cval=getCookie(name);

    if(cval!=null)

        document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

//使用示例

setCookie('username','Darren',30)

alert(getCookie("username"));

</script>

 

 

方法三

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <head>

        <script language="JavaScript" type="text/javascript">

           

            function addCookie(objName, objValue, objHours){//添加cookie

                var str = objName + "=" + escape(objValue);

                if (objHours > 0) {//为0时不设定过期时间，浏览器关闭时cookie自动消失

                    var date = new Date();

                    var ms = objHours * 3600 * 1000;

                    date.setTime(date.getTime() + ms);

                    str += "; expires=" + date.toGMTString();

                }

                document.cookie = str;

                alert("添加cookie成功");

            }

           

            function getCookie(objName){//获取指定名称的cookie的值

                var arrStr = document.cookie.split("; ");

                for (var i = 0; i < arrStr.length; i++) {

                    var temp = arrStr[i].split("=");

                    if (temp[0] == objName)

                        return unescape(temp[1]);

                }

            }

           

            function delCookie(name){//为了删除指定名称的cookie，可以将其过期时间设定为一个过去的时间

                var date = new Date();

                date.setTime(date.getTime() - 10000);

                document.cookie = name + "=a; expires=" + date.toGMTString();

            }

           

            function allCookie(){//读取所有保存的cookie字符串

                var str = document.cookie;

                if (str == "") {

                    str = "没有保存任何cookie";

                }

                alert(str);

            }

           

            function $(m, n){

                return document.forms[m].elements[n].value;

            }

           

            function add_(){

                var cookie_name = $("myform", "cookie_name");

                var cookie_value = $("myform", "cookie_value");

                var cookie_expireHours = $("myform", "cookie_expiresHours");

                addCookie(cookie_name, cookie_value, cookie_expireHours);

            }

           

            function get_(){

                var cookie_name = $("myform", "cookie_name");

                var cookie_value = getCookie(cookie_name);

                alert(cookie_value);

            }

           

            function del_(){

                var cookie_name = $("myform", "cookie_name");

                delCookie(cookie_name);

                alert("删除成功");

            }

        </script>

    </head>

    <body>

        <form name="myform">

            <div>

                <label for="cookie_name">

                    名称

                </label>

                <input type="text" name="cookie_name" />

            </div>

            <div>

                <label for="cookie_value">

                值

                </lable>

                <input type="text" name="cookie_value" />

            </div>

            <div>

                <label for="cookie_expireHours">

                多少个小时过期

                </lable>

                <input type="text" name="cookie_expiresHours" />

            </div>

            <div>

                <input type="button" value="添加该cookie" οnclick="add_()"/><input type="button" value="读取所有cookie" οnclick="allCookie()"/><input type="button" value="读取该名称cookie" οnclick="get_()"/><input type="button" value="删除该名称cookie" οnclick="del_()"/>

            </div>

        </form>

</body>

</html>    

 

 


来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30545764/viewspace-2120993/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/30545764/viewspace-2120993/

cuijiaojie6033
关注
【H5】前端存储 -- cookie、sessionStorage、localStorage
qq_48802092的博客
08-31 1238
前端存储分为cookie和webStorage，webStorage又分为sessionStorage（会话存储）和localStorage（本地存储）。
vue项目中js-cookie的使用存储token操作
01-18
1、安装js-cookie # npm install js-cookie –save # yarn add js-cookie 2、引用（需要的文件） import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return ...
h5 cookie获取和设置
Mr_wuying的博客
06-03 4380
//设置cookie function setCookie(name, value) { document.cookie = name + "=" + escape(value) + "; path=/"; } //获取cookie function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) re
H5中cookie的处理
guangbing8877的博客
01-07 9282
引言：再进行H5开发过程中，有时候需要前端存储cookie，比如存储用户登录的login_token。下次发送ajax请求时候，需要从cookie中获取token，附加在ajax的request中。 每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie： document.cookie="userId=828"; 如果要一次存储多个名/值对，可以使用分号...
针对H5本地无法获取Set-Cookie解决方案
weixin_51526447的博客
07-27 803
本地浏览器安装请求头扩展ModHeader - Modify HTTP headers。手动添加cookie。
H5中的cookie和数据存储
weixin_44691513的博客
10-12 3223
文章目录H5中的cookie和数据存储cookie的设置，获取和删除cookie的使用h5 storage永久数据持久化 H5中的cookie和数据存储 Cookie 数据存储到计算机中，通过浏览器控制添加与删除数据 Cookie的特点 存储限制 域名100个cookie,每组值大小4KB 客户端、服务器端，都会请求服务器（头信息） 页面间的cookie是共享 cookie的作用 页面用来保存信息 同一个网站中所有页面共享一套cookie cookie的使用 设置cookie 过期时间expires 读取
h5 应用程序缓存&cookie
qq_45457760的博客
04-19 323
// 应用程序缓存 // 通过创建cache manifest文件，创建web应用的离线版本 // 离线浏览、速度、减少服务器负载 // <html manifest="demo.appache">---启动应用程序缓存 // manifest文件是简单是文本文件，它告知浏览器被缓存的内容 // cookie // 客户端需要与服务器进行交互的场景 // 是一种进行网络会话状态跟踪的技术，由服务器生成，保存在客户端的一种信息载体 // 数据保存在客户端、以键值对存储数据、随HTTP请求头提交.
Android H5 交互Cookie 同步登录状态
WL-鬼
05-17 2986
其实这个使用场景还是蛮频繁的。原生和H5交互需要登录信息等等内容。都可以通过Cookie 还同步。 这篇文章呢也是对：Android 抛弃原生WebView，使用腾讯X5内核、并加入广告拦截。这篇文章的补充。 当时呢，主要是讲腾讯X5的使用，也提了一下cookie的同步，因为没有说的太详细。个别网友也有反馈。 这里就详细描述一下如何同步Cookie的整个流程。 下面也是直接贴代码了。...
h5储存和cookie储存
zerocher的博客
05-31 9733
一、Web Storage 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用，如果你从来没用过没了解过Cookie，没关系，看了这篇文章照样轻松玩转Web Storage。首先，学习Web Storage只需背熟这句口诀：“两个接口，四个函数”。 2、口诀： （1）两个接口：
ios js h5 交互 cookie设置 自动登录
大熊哥哥不忧桑
10-10 6328
保证可行！两步实现iOS UIWebView 通过 cookie 完成自动登录。 字数486 阅读967 评论3 喜欢35 这两天有个项目需求，在网上找了好多博文都不可以拿来就能实现（对于伸手党怎么能行），为了避免浪费大家的时间我在这里给出一份一定可行的方法： 1、相关知识点介绍 iOS在UIWebView中获取的cookie的方法：NSHTTPCookieStorage
php cookie使用实例h5,javascript cookie的简单应用
weixin_34916566的博客
03-11 62
在我平时开发网页的过程中，可能涉及到浏览器本地的存储，现在主流的浏览器存储方式有：cookie，直接读取xml，userData，H5 的LocalStorage等，Cookie存储数据有限，但对于数据量不大的时候操作还是比较方便的。下面这个例子主要是实现在网页打开的时候弹出一个提示框，但第二次以后刷新网页不在显示提示框，当然可以灵活的设置cookie的时间，控制是否显示提示框。var cooki...
解决Android webview设置cookie和cookie丢失的问题
01-03
和web那边商量一会，发现js写入的cookie丢失了。所有需要Android这边在重写写入一次。 mWebView = view.findViewById(R.id.mall_view); settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true...
httpwebreqeust读取httponly的cookie方法
08-31
然而，有些Cookie被标记为`HttpOnly`，这意味着它们不能通过JavaScript等客户端脚本语言访问，以增加安全性，防止XSS（跨站脚本攻击）对Cookie的窃取。但有时开发者需要在服务器端代码中处理这些`HttpOnly` Cookie，...
h5和js等思维导图.rar
04-25
通过这份“h5和js等思维导图”，学习者可以清晰地看到这些技术的关系、概念和应用场景，从而更好地学习和掌握HTML5、JavaScript以及相关框架如AngularJS的基础知识和进阶技巧。在实际项目中，结合这些技术，开发者...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4425
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
vue上传预览CAD文件
只会写bug
09-24 554
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 215
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
vue单点登录异步执行请求https://xxx.com获取并处理数据
最新发布
m0_65360496的博客
09-27 103
vue单点登录异步执行请求https://xxx.com获取并处理数据
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 360
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
H5 点击table行保存获取后的数据到cookie
07-14
可以使用 JavaScript 的 `Document.cookie` 属性来设置 cookie 的值。例如： ```javascript function handleRowClick(event) { const rowData = event.currentTarget.innerText; document.cookie = `rowData=${...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值