flex中怎么获取cookie

<%@ Page Language="C#" EnableEventValidation="false" ResponseEncoding="utf-8"%>

<% //读取Cookie

HttpCookieCollection cookieColl = Request.Cookies

//获取其中名为VisitorCount的Cookie

HttpCookie oCookie = cookieColl["VisitorCount"]

//检查该Cookie是否存在，如果不存在就新建一个

//也就是第一次访问

if (oCookie == null)

{

HttpCookie newCookie = new HttpCookie("VisitorCount", "1")

newCookie.Expires = DateTime.Now.AddYears(1)

Response.Cookies.Add(newCookie)

}

else

{

//如果存在就更新

oCookie.Value = "" + (Convert.ToInt32(oCookie.Value) + 1)

Response.Cookies.Set(oCookie)

}

//返回更新后的值给FLEX

Response.Write(cookieColl["VisitorCount"].Value)

%>

以下为FLEX4.5的代码：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="send.send()">

<fx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent

[Bindable]

var a:String//动态更新访问次数.会出现警告，但不影响功能，咱不理会！

protected function send_resultHandler(event:ResultEvent):void

{

// TODO Auto-generated method stub

a=event.result.toString()

}

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

<s:HTTPService id="send" url="http://localhost/cookie.aspx" resultFormat="object" result="send_resultHandler(event)"

method="GET" contentType="application/x-www-form-urlencoded">

</s:HTTPService>

</fx:Declarations>

<s:Label x="204" y="182" text="欢迎您第{a}访问本站"/>

</s:Application>

js把id存到浏览器本地的方法：浏览器的cookie可以用来存储一些少量的网站信息,比如登录的用户名,用于提高用户体验非常有帮助

有的一些网站在第一次登录后,在指定的时间范围内容,下次在打开网站,再次登录时,不用每次都重新输入用户名的

或在做一些购物车效果时,也可以使用cookie,保持一个状态持续多长时间的

具体示例代码

代码如下所示,以Vue为示例

<template><div class="wrap"><div class="content"><el-form ref="form" :model="form" label-width="100px"><el-form-item label="用户名"><el-input v-model="form.name" class="input" clearable></el-input></el-form-item><el-form-item label="密码"><el-input type="password" class="input" v-model="form.pass" clearable></el-input></el-form-item><el-form-item label="记住用户名"><el-radio-group v-model="form.date" size="mini" @change="handleCheck" class="el-radio-group"><el-radio :label="3" border>保存3天</el-radio><el-radio :label="7" border>保存7天</el-radio><el-radio :label="10" border>保存10天</el-radio><el-radio :label="30" border>保存30天</el-radio></el-radio-group></el-form-item><el-form-item class="login"><el-button type="primary" @click="onLogin">登录</el-button></el-form-item></el-form></div></div>

</template>

<script>export default {data() {return { form: {name: '',pass: '',date: 7,}}},mounted() {this.getCookie('username')console.log(this.form.name)},methods: {handleCheck(val) {console.log(val)this.form.date = val// 多少天以后失效,这里默认设置的是7天,需要转化成时间戳秒},// 设置cookie,包括key名,value,值,过期时间expiredayssetCookie(user,val,expiredays) {// 把用户名保存进cookie里面document.cookie = `${user}=${val}`var exdate = new Date()// 当前时间exdate.setTime(exdate.getDate() + expiredays*24*3600*1000)// 设置时间,多少天失效// 设置为新的值document.cookie += `'expires='${exdate.toGMTString()}`// 根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果 console.log(document.cookie) }, getCookie() { // 提取当前的cookie let c = document.cookie// 提取key为username的cookie值 if(c != '' &&c.indexOf('username') >-1) {var arr = c.split('')// 以分号,将cookie进行拆分存到一个arr数组中for(var i = 0i<arr.lengthi++) { // 遍历数组arr var key_val = arr[i].split("=")// 获取key和val if(key_val[0] == 'username') { // 设置cookie的值到输入框this.form.name = key_val[1]}} }},onLogin() {const user = 'username'const {name,date} = this.formif(name) { this.setCookie(user,name,date)this.$message({message: `用户名的cookie已经设置成功,刷新页面时仍然是显示的,保存${date}天时间`,type: 'success',duration: '5000'})console.log('submit!')}else {this.$message.error('用户名不能为空')}}},}</script>

<style>.wrap {text-align: left}.content {margin: 10px autodisplay: flexjustify-content: center}.el-radio-group {display:flexjustify-content: left}.login {text-align: left} </style>

1

2

3

4

5

1

2

3

4

5

以上本示例中的源码,其中核心代码设置cookie如下所示

// 如果是在原生js里,需要写function,上面的是vue的代码,省略了function 的

function setCookie(user,val,expiredays) {// 把用户名保存进cookie里面document.cookie = `${user}=${val}`var exdate = new Date()// 当前时间exdate.setTime(exdate.getDate() + expiredays*24*3600*1000)// 设置时间,多少天失效// 设置为新的值document.cookie += `'expires='${exdate.toGMTString()}`// 根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果

}

1

2

3

1

2

3

设置cookie主要需要有cookie名,它是键值对的,还需要一个设置一个过期时间

使用document.cookie可以读取cookie,也可以重新设置cookie

而获取cookie,需要将从cookie中拿到指定的cookie,需要通过split,先拆,然后在获取指定的cookie值,重新在设置值的,更多的新手同学,可能就是卡在怎么去拆的,然后取到对应的值的，其实,代码也很简单

具体代码如下所示

function getCookie() { // 提取当前的cookie let c = document.cookie// 提取key为username的cookie值 if(c != '' &&c.indexOf('username') >-1) {var arr = c.split('')// 以分号,将cookie进行拆分存到一个arr数组中for(var i = 0i<arr.lengthi++) { // 遍历数组arr var key_val = arr[i].split("=")// 获取key和val if(key_val[0] == 'username') { // 设置cookie的值到输入框this.form.name = key_val[1]// 这里就是在重新赋值,将cookie获取到的val进行赋值 }} }

},

1

2

1

2

总结

cookie它是浏览器document下的属性,是一种机制,只是提供了一个接口给js脚本进行使用,通过添加cookie以及expires达到保存多少天的效果

cookie的用途比较多,可以与服务器端进行交互,cookie的值是会随着表单的提交发送到服务器的,所以它可以作为一些特殊的字段来使用的

比如:服务端的session就需要依赖cookie

<!-- 容器属性 -->

<!-- 如果a未开启  flexd性布局，则内部三个盒子会自上而下排列 -->

<!-- 如果a开启  flexd性布局，则内部三个盒子会自左向右 -->

<!-- justify-content: center沿着横轴方向变化 对其 靠左 靠右  -->

<!--   align-items: center 沿着数轴方向变化  对其 靠上 靠下 -->

<!--  flex-direction: row按行排列 ，，，如果就是row-reverse，内部项目就是cba,顺序反转-->

<!--  flex-direction: column按列排列 ，，，如果就是column-reverse，内部项目就是cba,顺序反转-->

<!--  flex-wrap: nowrap如果项目宽度大于容器宽度，那么项目会等分容器宽度，不换行-->

<!--  flex-wrap: wrap如果项目宽度大于容器宽度，那么项目会不会等分容器宽度，按照自身宽度排列，，换行-->

<!-- 项目属性  oder,flex ,align-self-->

<!-- flex-grow: 1,如果三个盒子都使用了，那么自身设置的宽度大小不起作用，，会按照flex-grow:等分父亲的宽度（用于等宽的设置），-->

<!-- flex-basis盒子的起始大，可以设置大小 -->

<!-- flex-shrink父元素 在缩小，，子元素等比例缩小，属性值为0的，，就是不可被压缩的-->

<!-- align-self子元素在竖轴上  利用这个设置可以改变  父元素指定的位置  center,或者flex-end-->

---