Tip:
Highlight text to annotate it
X
hello everyone
uh... up to this point everything has proceeded according to my designs and as
a result
in this particular episode we are now ready to talk about a subject called
cookies
previously we discussed the fact that the web is a stateless system you can go
back to the previous episode if you wanna review exactly what that means
but more or less what we discussed was that because the web is stateless
some extra abilities need to be present in javascript in the browser in order
for there to be memory that can be used to keep track of information as we move
from page to page or as a uh... client or a user moves from page to page.
previously we discussed u r l parameters, query strings as being one of the
techniques that can be used for uh... supplying this memory and being able to
pass or
remember information as the user goes from page to page
but as you may have noticed if you stopped and thought about query strings a little
bit
they can be a little bit difficult to work with especially in a very
distributed
uh... type system
they... they work very well for small discrete pieces of information that
simply need to be available uh... from one page to the next maybe uh...
multipart forms or something like that
but anytime we have information that needs to be available on sort of a more
site-wide basis query strings can become very, very difficult to work with
so what we can do instead, another technique of being able to keep track of
information is that we can actually use these things called cookies
now what a cookie basically is is a small chunk of data
that uh... javascript or other code on the server
can request that a browser store
so traditionally cookies were actually small text files that were
stored inside a browser but nowadays the browser's tend to have sort of a little
built-in database which is where uh... what we call cookies are now typically
stored so more or less uh... we visit a page on our website the page on that
website says hey browser make a cookie and as a result the browser stores some
information that the server requests internally so it can then be made
available to other pages on that site
to sort of lay this out so you can sort of see how it works i have a client here
on the left and a server on the right the client of course would enter a u r l which
is essentially sending a message to the server saying give me a page i want you
to send me a page
the server then of course will turn around and send the page back to the
client and along with the actual page either in the javascript or some other
type of code the server may also request that the client create a cookie
that cookie will have some piece of data in it that the server thinks is
important and will more or less use to sort of identified that client in future
requests. in response to the request to make a cookie the browser should
actually do so assuming that the uh... ability to create cookies is actually
turned on in the browser. this is always something that the user could turn off if
they didn't like it
um... the browser will actually make the cookie and then every time there is a
request of the same server the same domain after that
the client saying give me another page
it will also then send along a copy of any cookies that the server had
previously asked it to make.
this is something that only works between a client and a server
if a server asks a client to make a cookie
that client will only give that cookie back to that server the server the
requested its creation so there's really nothing to be too paranoid about as far
as cookies are concerned if you go to one website and it asks you to enter your email
address
and that email address get stored in a cookie it doesn't mean that your browser
is then going to send that cookie with your e-mail address in it every site
that you visit from then on
that cookie that has your e-mail address in it will only be sent back to the
server
where that cookie was originally requested to be created
now cookies are a little bit complicated in a way in that they have six attributes
that are very important to them but in all honesty there's only three of these
attributes that we actually use very regularly
the other three tend to be sort of special-purpose attributes and we'll
discuss what they do
but i don't suspect you will probably use them uh... as often as you just use
cookies in general
the first attribute every cookie has is that every cookie has a name. the name of
a cookie is how that cookie is actually identified. in javascript when we make a
cookie we must give it a name it's the only attribute that is required that
simply has to be there and in javascript whenever we want to find the value of
the cookie we will typically look that up based on that cookie's name.
every cookie, or most cookies anyway, they are also probably going to have a value.
the value is going to be just some value that we wanted to have stored in the
cookie. it could literally be just about anything although the actual size of the
value stored in a cookie is uh...
not infinite it is limited
i don't usually bother to remember exactly what the limit is as an attribute
because if you're using cookies correctly chances are the data that you
actually store in your cookies won't be all that extensive anyway
the name and the value of a cookie
typically go together whenever you're creating a new ... a new cookie. whenever we
want to create a new cookie the way we typically do it is we put together a
string that has the cookie's name followed by an equal sign followed by
that particular cookie's value.
we then take that string and we assign it to an attribute, or sort of a sub
object of the document object called cookie so if we were to do something
like this code here, document dot cookie equals and then the string name equals
value
what would happen is a new cookie would be created with that name that had
stored inside of that whatever value we asked for.
i wanted to point out here that document dot cookie appears to be sort of a
regular object or a regular variable but it actually has some slightly unusual
behavior
for example if we created a variable x and assign the value of five to it
and then we took the variable x and we assigned the value of nine to it the nine
would of course replace the five. typical variables can only store one
value at a time
document dot cookie doesn't really work that way
document dot cookie i think of as being sort of more like a doorway that we
push information through
and we can keep pushing information through that doorway without replacing
or without uh...
uh... stopping the fact that we ever pushed anything through it previously
so if i set one cookie uh... create one cookie string and push it into document
dot cookie that basically is me telling the browser make this cookie and give it
a name. give it this name and this value. if i then say document dot cookie equals
and i put together a different cookie string
when that one goes through it'll tell the browser now make this cookie and that
doesn't replace any cookies that were created previously
unless of course
all of the cookies that i'm setting here have the same name.
every time i set a cookie with the same name as a cookie that's been created
previously what i'm actually doing is i'm replacing that previously created
cookie.
the second attribute of cookies
that uh... i guess i actually the third attribute of cookies they are probably
used fairly frequently is the expires attribute. the expires attribute actually
has to do with how long the cookie actually sticks around. what you'll find
is that there are basically two different types of cookies. there are what
are called transient cookies and what are called permanent cookies.
transient cookies are the cookies that are created anytime you create a cookie and
you do not to set an expires date for it.
if we create a cookie like we did on the previous slide where we simply set
a name and a value for it, that would be a transient cookie
and the behavior that you'll see from transient cookies is that they will
be created
but then they will also automatically be erased the next time the browser is
closed.
so if i create a transient cookie it will generally stick around as long as
the browser remains open but as soon as the browser closes that cookie will
automatically be erased, it will be done away with.
and the next time the browser is open then of course that cookie will no
longer be there.
uh... those are certainly the easiest kind of cookie to create because all
they require is a name and a value, nothing else has to be set for them.
permanent cookies on the other hand are cookies where the expires attribute is
set
when we actually set the expires attribute, we do so by actually storing
a date and time in the universal time format
inside the expires attribute for a cookie.
uh... the date and time that we store in the expires attribute should be some date and
time in the future typically
and what we're doing when we do that is we're asking the browser to try and keep
that cookie around until that date and time is reached.
with that kind of set up when we have a cookie that has a name, a value and an
expires date and time in the future the browser should under ideal conditions
keep that cookie until that date and time is reached regardless of whether
the browser is opened and closed uh... million times or not.
there are some of course situations where even permanent cookies can get wiped
out
uh... the user can of course manually always get...go in and delete individual
cookies or clear out their entire cookie cache, there's also the possibility that
the browser is simply storing too many cookies. it might decide to start going
in and deleting permanent cookies just to sort of maintain its own uh... working
condition which i... i think is probably a pretty fair thing to do.
now whenever we use the expires attribute as you've probably guessed from
what i was discussing before
we have to be able to set a date for it and to set a date for it we really need
to understand a little bit about how javascript handles dates and times
so let's take a quick look at that now.
javascript includes a date object which actually makes it extremely simple to be
able to work with dates and times within javascript.
just here as a quick example let me show you how we created a date object and what
it contains. inside the body of my document
uh... i can create a set of script tags as we've done a million billion times
before and inside there i could uh... perhaps create a new date object. what
i think i'll do is i'll create a
variable i'm going to call it now and into that variable i am going to put a
new uh... date object which would be created something like this
if i were to then do something like a document dot write line and
actually ask it to display for me the value of that date object what we would
find is that we end up with the full date and time of the date objects
creation stored within it.
so more or less what we have here in the day object is it's telling us that
on monday and in my case august thirty first two thousand nine at eight forty
six and forty two seconds in the morning
uh... five hours behind greenwich meantime in central daylight time
a date object was created so
literally at the moment that this particular statement executes
uh... the date object comes into existence and automatically stored
within it then
is the date and time of that uh... that it was at the moment that that thing was
actually created.
so if i go back to the browser and i actually hit refresh of course it reloads
the page, it re-executes the javascript
and as a result i end up with a slightly different date and time in it. if i hit
refresh again
you can see that it updates and we get a new date object each and every time
the date object itself is actually very very easy to work with
if i were to take my date object
and maybe uh...
uh... put it into a new variable i'll call it uh... then ...or maybe i think
what i'll do is i'll create a new date object
besides my now object
something like that
there're actually ways that we could uh... manipulate the date object in a
number of different ways. the date object itself actually contains quite a few
methods
uh... most all of them of course revolve around accessing or changing date and
time. so for example if i were to do uh... document dot write line
uh... then
dot uh... get
minutes
what it would actually do for me in that case is it would retrieve just specifically
the minutes from that particular date object so in this case
that is what will then be printed out.
so if i come back to my browser and take a look the forty-eight that shows up
over there is simply the minute part of the then date object over here you can
see the now data object which was created at almost exactly the same time
also has forty-eight for its minutes. so i can extract from a date object
any individual part of the date or time using these different get methods. i can
do things like
get seconds, get minutes, get hours, get month, get day,
get full year. lots of good things along that line.
i can also then use a variety of different methods that all began with
the word set which are more or less just like the get methods the only difference
being of course the set methods actually change the date. so if i were to do then dot set
minutes
and i were to tell it to set the minutes to
uh...
let's do one
then it'll actually go to that particular date object and reset it's
minutes value to whatever value i actually passed to the method here.
so here when i set the minutes to one and then i get the minutes one should of
course be what comes back and sure enough one is what we actually get there
for the minute of the
then object.
this becomes really handy to us when we're using um... cookies because
cookies require
that a uh... date and time
be stored within them in the expires attribute
whenever um...
whenever we want the uh... cookie to be a permanent cookie, a persistent cookie
one that will not uh... expire at the end of the session.
the way this would uh...
most normally be done
i'll go ahead and just use my uh...
then object here as an example. the way this would very often be done is if we
wanted to say for example set a cookie that was going to expire in uh...
let's say a uh...
three days
what i can do is say then dot set uh... hours
to then dot get hours
uh...
plus twenty four or something like that so im adding twenty four to the current
number of hours
which should then give me a date time that uh... uh...
data object that has within it a uh... date and time that are twenty four hours
in the future. so down here then what i'm gonna do is i'm going to uh... just
display the then object itself. lets take a look at in the browser
so right now the now object shows us that it's august thirty first at eight fifty
the then object which i've now added twenty four hours to says it is september first
at the exact same time, so exactly twenty four hours from now. so if i were to use
the then object to set the expired state for a cookie
that cookie would be set to expire exactly twenty four hours from the time
it was created from the time that the data object used in its expires
attribute was created.
the only last little trick that goes along with it then is that the default
format that we get for the uh...
date object here
is not the format that cookies will allow. what i would actually need to do
if i was using this in a cookie is i would need to call another method that's
available in date objects called
toutc string
the to utc string method actually you can see changes the format of the
date objects and this particular format that puts it in as the exact format that
cookies require for their expires atribute. so more or less the process would
be whenever i want a cookie that's going to expire sometime in the future
i simply create a date object like i've done here with the then object, i then
take some
attribute some value stored within the then object and i set it to some period
of time in the future
then i take the utc string uh...format for that particular date object and
that's what i sent to the expires attribute for my cookie
my cookie will then expire that far in the future ideally that's the way it should
actually work.
the reason that the utc string is used
is if you think about the internet it's sort of uh... trends uhh...transcends time
zones in a lot of ways
the default format of the date object is always local to the time zone of
whatever computer is uh... displaying it basically
so since i'm in central daylight time here my now cookie which is being
displayed with the default format displays in central daylight time
but what if i'm not in the same time zone as the server that's feeding me
this page or the server that's requesting the cookie be created
this time zone's become a little bit meaningless or
i suppose uh... just a bit of a hassle to have to deal with so what's much
simpler on the internet is to simply keep track of everything using
Greenwich meantime which they also call utc time or zulu time or world time or
uh... a lots of ...universal time lots of names for it but it's basically a time
with no time zone there's no time zone adjustment to it it's simply Greenwich
meantime
so uh...
uh... it'll vary of course uh... little bit from your uh... regular time uh...
unless of course you live in Greenwich or somewhere on the international dateline
but uh... that is the way that is typically done on the internet.
what i'd like to do next then doesn't actually have anything specifically to
do with cookies but it is a little example it'll give us a little bit of
practice playing with the data object
what i want to do in this example is i want to see if we can set up javascript
actually place a ticking clock, a clock that we can actually see time
progressing on automatically
onto a page. to do this what i'm actually going to do is down inside the body of
my document i'm going to put in a div and then i'm going to give this div the
id of clock that's actually going to be the div where i'm going to insert the
current time every second to be unobtrusive, what i'm gonna do then is i'm
going to put some script tags up in the head section and in the head section i'm going to
put together a window dot on load event
so that will be a new function
so that once the entire page is loaded this function will execute uh... we have to
wait until the page is loaded of course so that the clock div will actually exist
what i'm going to do here inside this function first then is i'm going to
create a variable called clock div
and into that variable i'm going to retrieve the div itself using
get element by i_d_
there we go
maybe i'll throw in an alert here real quick and uh... take a look and make
sure clock div actually ended up there in my variable as i expect it to.
sure enough there is an html div element there so it looks like the retrieval of
it went just fine. what i'm gonna do next then is i'm going to create a variable called
time and into that time variable
i'm going to create a text node
just a bit of text basically and what i want inside that text node is a new date
so i actually end up with the date and time stored there inside the text node.
then i'm simply going to append
my time as a child
to my clock div something like that so without having to insert a script tags
into the body without having to do a document dot write line i end up
with the current time and date there inside my div. now having the
clicking, ticking clock on a page that would probably look a little bit funny
to have quite that much information so maybe what i want to do is kind of uh...
uh... parse that down a little bit so it's a little bit more appropriate
i think what i'll do here
is i'm going to make a variable called now and into the now variable
where i'm actually going to place the uh... date object sorta like i did in
the previous example
then when it comes time to actually make the uh...
time, the text node time, what i'm going to do is i'm going to take now
i'm going to get
the current hours
i'm going to append to that colon
then i will append to that now dot get minutes
then i'll append to that colon
and then i will append to that now dot
get seconds
so i end up with just the hours minutes and seconds all strung together there
in a string becoming a part of my text node.
so if i take a look at it now i end up with just that
which looks a little bit odd.
everything... everything that's one digit has reduced down to one digit
so it will really help if we did a little bit of string format in there
but i think i'll just leave it as it is for uhh...
for right now anyway
um... we can come back and fix that in a minute
so anyway that actually gets my time displayed there on the page even if it
does look a little bit odd
um... what i would want to do next then to actually get this thing to uh...tick
is i would want to and set it up with some type of uh... timer
so in a previous episode we actually talked about the uh... set
interval function
which is kind of in a way a bit of a loop in that it's going to uh...
continuously call the same code over and over again
but what it's also going to do is it's going to call that code on a timer so
every so often it will call it. so what i can do here for example maybe is i could
have it call a uh... function that i'll call tick, that function doesn't actually
exist yet
and i can tell it to call that tick function every one thousand milliseconds
which means every one second essentially so then what i can do
is i can create my tick function
and more or less what i'd want the tick function to do is generally go through
the same steps that I had done up here in the document dot onload
as a matter of fact
i could probably take most of this code that i had put up here in document dot
on load
i could instead move it down here to my tick function and then up here in
document dot on load i could simply call the tick function to get all that done
so uh... here inside the tick function we're doing pretty much the exact same
thing we had done before we are retrieving our
div where our clock is going to be displayed creating our date object
setting up the actual date and time to be displayed and then append it.
so uh... that might even have been a little bit easier than i thought it was going
to be let's go take a look and see if that works
pretty close
you can see about the only thing i forgot was that we actually need to
clear up the contents of that div. what it keeps doing here is just
appending the new time to what's already there
so it is progressing if you kind of watch the seconds there at the end we
just need to wipe out everything that was there previously
so let me make one other function here
uh... let's call it uh...
uh... clear time
and what i'll do here is i'm going to retrieve my clock div again
i am just gonna copy and paste that
then i'm gonna say while uh...
clock div dot... i always forget of the name of this method...
has uh... children
has childnodes? Let's try has child nodes
while clockdiv has childnodes then what we're going to do is
we're going to do uh...
uh... clock div
dot uh... remove child
uh... clock div
dot first child
and see what that does
didn't quite get it
let's go back and give this another try
oh! i've never actually call... called my function did i?
uh... we want to do that in here somewhere call
clear time
see what that gives us.
hey! there we go. eureka much much much better so anyway a fairly simple little
thing to do to uh... get something that appears to be a ticking clock showing up
on the page
uh... just to make sure you are clear on what's happening of course is
everything kind of kicks off from our window dot onload function
the document completes loading
we then call the tick function the tick function goes through retrieves the
clock div, sets up to date, clears anything that was in the clock div before
and then appends the current time
what then happens is the uh... on load function sets up an interval so that the
tick function is called again every one second in essence so every one second
whatever was currently in that div gets wiped out and has been replaced with a
new... the content of the new data object
and since the date object reflects the time it was actually created that new data
object being called one second later will be
one second later and we end up with uh...
uh... a time that's one second in the future being displayed in the illusion
that we actually have a ticking clock
now that we've talked about dates and times in javascript this little bit of
code should make sense to you. what we're basically doing here's we're
creating the new data objects called he exp for expires is what i was thinking
of course that new data object uh... starts off
containing the uh... date and time of its creation
and then what i do in the next statement the exp dot set full-year is i actually
get the year that the expires uh... the expire date is currently set to, i add one
to it basically setting it to the point to one-year, one year in the future, one year
from right now,
and then i set that as the year for the actual expires date so i end up with the
exp being a data object that points at
one year from right now.
to actually set that expires date we do document dot cookie just like we did
before when we're setting the name in the value
when we assigned the document dot cookie or cookie string our cookie
string does still have name equals value in it, just like it did before
but we've now followed name equals value with a semi colon and a space
whenever you assign multiple attributes to a cookie you always separate those
attributes with a semi-colon and a space so now name equals value semi-colon
space expires equals and then you can see here i've appended onto that the
expires date that i created in the first two statements here
uh... expressed in a u t c string format which is exactly what
browsers want your expire state to be set in.
so that will end up giving me a permanent cookie that will expire one
year from today.
the next attribute of cookies is called the secure attribute and it is relatively
simple compared to some of the others. with the secure attribute we set it
just like we would any other attributes secure equals true is the way we
would actually assign it in this particular case
the way the secure attribute actually works, or what it actually does is it
informs the browser that that particular cookie should not be sent to the server
unless it's over a secure connection
so anytime you store any kind of uh... sensitive information inside a cookie
you should always set the secure attribute for it to make sure that that
cookie will never be sent in the clear it will
only be sent over
secure h_t_t_p_ ssl-type connections
um... for example if i uh...
had a banking website and a customer logged into the secure part of the
website to uh...
to view their account and if for some reason which probably wouldn't be a very
good idea i at that point on the secure part of the website store that
customers uh... account number in a cookie
i would definitely want to set secure equals true for that particular cookie
that way when the user, maybe the next time they visit, goes to the home page at
the site the home page of the bank site which is not secure that cookie would
not automatically be sent uh... because at that point of course it could
potentially be intercepted and somebody could steal their account number
anytime secure information is stored from a secure part of a website
uh... make sure you set the secure attribute to true
the next attribute then of cookies is called the path attribute and
the path attribute actually lets us override sort of the default behavior of
cookies and that default behavior is that cookies will only be sent back to
pages on the server
when the page that's been requested is at the same level
or below the page that initially asked a cookie to be created so that probably
sounds a little bit confusing so uh... here's a little example let's say in the
roots of the file system of my website i have a home... i have a page called home
dot html
and below the root of the filesystem i have a sub folder called gallery and in
that gallery sub folder i have a page there called thumbs dot html
now if for example the home dot html pile uh... pile (laugh)
the home dot html file
asks to have a cookie created
because that page is at the very top of my website basically at the root of the
file system in which my website is stored the any cookie that that page asks
to be created will automatically be made available to all pages below it at the
same level or below
so if the user goes to the home page and creates a cookie when they then go to
the thumbs page the thumbs page will receive that cookie that the home page
asked to have created.
the opposite however is not true if the user were to go to the thumbs page and
the thumbs page asks the browser to make a cookie
and then the user went back to the home page the home page would not be given
the cookie that the thumb paid... thumb page asked to have created
because the thumbs page is below the home page in the filesystem hierarchy
or at least that is the default behavior. with the path attribute we can
actually override that.
whenever we put in a path attribute for a cookie what we can do is we can
actually specify the path the cookie should be returned to
so if my thumbs page for example created a cookie and i wanted the
thumbs cookie to be available to the home page
then when i created that cookie from the thumbs page i could set path equal to
slash
which basically tells the browser
any page at the root of my uh... website or below should receive this
cookie
and that of course is despite the fact that the cookie was not created at that
level it was actually created in a sub folder like i said. not something i suspect that
you will used too terribly often.
the very last attribute of cookies then as the domain attribute which is
probably the one that you'll use least often it's sort of very special purpose
and it will
uh... if you ever get to a situation where you actually need it and i
congratulate you you must be doing really well
the way the domain attribute actually works or what it's for is if i have a
client that sends in a request to a page to a server here the server is called
w_w_w_ and it's a part of domain dot com
when that request is sent into domain dot com the www server
answers it and sends an page back to the client,
possibly telling the client to create a cookie.
of course then if the client makes another request of the same domain the
same server will pick it up because in this situation it's the only server there
so of course when the client makes that request it will send that cookie into the
server so everything will work just like we've been describing. but of course
there is always the possibility that in a very large or complicated website there
may be more than one server
that is servicing that particular domain
so here for example if we say that domain dot com has to web servers w_w_w_1
and w_w_w_ two the situation gets a little bit more complicated.
if the client makes a page request for a page from this domain one of the two
servers we don't know which one necessarily will service that request
and send the page back to the client and of course it may at that point ask the
client to create a cookie.
if the cookie will ...uh...the browser will of course then create the cookie and then
on the subsequent request
when that request goes back to the domain if it is not the same server that
the browser spoke to last time when it was asked to create the cookie than the
browser will not actually send the cookie along.
so imagine a situation for example where this
is... let's just say your bank website again
the bright and uh... user in their browser goes to the bank web site w_w_w_
one sends the login page back to the
browser
the user than logs in
the um... form submission goes back to w_w_w_ one www one sees
that yes that's a correct username and password they then sent back a cookie
to the browser that says okay you're now logged in.
maybe then the user in the browser clicks on a a secure page they want to look at
their account balance but maybe this time that request instead goes to w_w_w_
two because w_w_w_ one has gotten busy handling some other request
well even though that client
is login according to w_w_w_ one and has a cookie to show that it's logged in
because the browser is now talking to www two it'll be like
all of a sudden the user's not logged in any more and they will wonder what in the world
was going on. well that's basically what the domain attribute's for
anytime you have this kind of situation you can use the domain attribute
to basically tell the browser when it creates the cookie
that it should make that cookie available to any server
that is working in that particular domain so here you can see in this code
what i've done is i've included the domain attribute what i've actually
assigned to it as a dot
followed by the complete domain name
what that will do is it will tell the browser any server
that has dot domain dot com after the servername is an acceptable server
to send the cookie to. so that would allow us to continue working in the sort
of multi server environment.
let's start off here by taking just a very simple uh... look at uh... creating
and uh... retrieving cookie values.
uh... this is just going to be a silly little example so i'm just gonna go
ahead and throw some script tags here into the body section of my document and what
i want to do here maybe first of all it's just create a transient cookie. to
do that i'm going to go to document dot cookie and i'm going to assign to
document dot cookie a cookie value
uh... basically when i assign this here i need to put in a name and an equal sign and
then a value
so i'm going to call this ah...
cookie one for example and i'm going to give it a value of i don't know blue
just as an example.
if i go ahead and saved that and then pull it up in my browser of course
nothing actually appears on the page but technically our cookie should be
created at that point
i can confirm that my cookie was actually created by going into my
browser settings of course depending on your browser and the version you'll find
the settings in different places.
once you get into the settings again depending on your browser and the version
you'll have to dig around a little bit but you should find in there somewhere a
place we can actually view your cookies.
if i go take a look at my cookies here i can see that yes indeed a cookie
does exist in my browser called cookie one that has the contents of blue that's
actually its value
you will also notice that it has no expires date, it has no security no secure
attributes set,
it does have a path all cookies have a path uh...if we don't set them they get set
automatically.
so all of it is actually listed there and of course over here in my particular
browser what it does is it lists this has been a file cookie or file cookies
meaning that it didn't really come from an actual website it was actually from
an html page that was loaded locally.
so i can see that my statement my javascript statement in my uh...
text editor here did indeed work. i did actually create a cookie. so let me see now
i'll create another cookie and what i want to do with this one as i want to create
a cookie that uh... will not expire for a period of time uh... uh... persistent
or permanent cookie whatever you'd like to call it.
so to do that i'm actually gonna start off by creating a expires date
so uh... i'm gonna create a new data object i'm saving it here in a variable called
expires i think what i'll do for expires is i'm gonna set it's minutes
to whatever the current minutes are exp dot get minutes
and then i'm going to add five to it so it will actually expire in five minutes.
uh... five minutes from the time it's created of course then i want to use
that expires attribute to create another cookie so document dot cookie equals
i'm gonna call this one cookie two and i'm gonna assign it the value of yellow
then to actually put in the expires attribute what i'm going to do is uh...
append my cookie value there with the semi colon and a space and i'm going to put
in expires equals and i will append to that my expires date format it as a u_ t_c_
string.
so there we go that should create a second cookie for me.
again if i come back over to my browser and hit refresh i don't see anything but
if i go back into my settings again look at my cookies
there's cookie one that was there before still there
here's cookie two that's now been created.
again path expires uh... the expires date is actually there now for this one which
should be five minutes from uh... from now
and it looks like everything's working just fine.
so there we go we can create permanent and transient cookies.
the one other thing i might want to do is if i wanted to uh...
display the cookies that i have I can do something like a document dot write
line and just display document dot cookie.
when I take a look at that my browser
this is the way that the cookies are actually given back to me.
you'll notice that all the cookies that you have access to in your javascript are
always returned as one long string
so it doesn't give me back cookie one and cookie two separately, instead they come
back as one long string so if i am in a situation where i'm dealing with more
than one cookie they're certainly going to be some parsing that i'm probably
gonna have to be there very much like we did with the url parameters
previously.
you also notice that in the cookie string that's returned here all it does
is return the names in the values of the cookies the second cookie, cookie two, had
an expires attribute too but all the additional attributes the expires, the
paths, the domain, the secure, those are not returned whenever a cookie is uh...
requested like it's been sort of requested here. so it's simply the names
in the values that we have to actually work with
all right?
what i'm going to next as i'm actually going to uh... shut down my browser
right so i just look at my code here. here when i pulled my browser backup
is a little bit odd because my browser at this point is actually still giving
me back my first cookie my uh... might transient cookie which technically it
shouldn't be at this point
if i had to guess i would say it's probably something as a result of the
fact that it is a local cookie instead of an actual cookie that's been loaded from a
real website which is making a behave a little bit uh... abnormally in a way.
but generally in that case when the browser has been shut down and started
back up again the uh...
transient cookie should not be returned at that point it should have actually been
uh... wiped out.
what i wanted to do next was to go back and look at an example we had done
previously where cookies would actually be a benefit to us.
in this particular case uh...what i've gone back to is the font size changer
example that we did i believe when we were talking about url
parameters uh... it actually looked like this in the browser you might
remember.
uh... what... how we had it set up was that we had three links for different size
text up here in the upper right-hand corner whenever we clicked on one of
them it would change all the text on that page to be that relative size.
so the large link makes everything relatively larger, the medium link was
about what we started off with, a small link makes everything relatively smaller.
what I've actually done here for starters to uh... get this example going to show
you where cookies would be a benefit to us
is i've actually setup four pages that are basically identical to this and i've
added a little bit of navigation here that lets us go to each one of those
pages. so i have the home page which is page one
page two, page three, and page four.
they all have basically the same file name just a full number appended to the
end uh... to make each of them unique.
now uh... when we had done this example previously
the way we have actually set it up was that we had these three links that we
had added to our code
each one of them went back to the current page and passed a url
parameter
uh... called size
and a uh... actual uh... numeric size for the text to go along with that so when we
selected our small size, we set the size to nine
when we selected our large size we set the size to twenty four
and on the medium size we just didn't set anything at all.
so when we had this working with url parameters the way that it actually
functioned
was that uh... when the page loaded here up in our javascript in the window dot
onload function
uh... we would actually check to see if there was a u r l parameter passed
if there was a u r l parameter passed then we would go through the steps of
parsing that parameter uh... remove the question mark
we split it on the equal sign
we then checked to see if we had a size parameter and if we did
what we would actually do is retrieve the page itself, the actual page element
which is a div that contains the entire rest of the page, and we would set
the font size there to whatever value was contained inside the url parameter.
so whenever we click the link it goes back to the current page and in going
back to the current page results in having the actual font-size changed. that
worked fine when we were dealing with the single page just using url
parameters to do that. but if we go and we start having multiple pages like i've
set up here in this example you'll see that the problem is if i'm right here on
page one and i select the large size
when i go over to page two everything goes back to medium. it basically forgets
that we had previously selected the large size. if i here on the second page
i select small and then go back to the first page for example again everything
goes back to medium,
back to the default size. the reason it's doing that is these links that i've
added for this particular example which they're just each one of the four
different pages that make up the example uh... whenever we go to one of them you
can see that the url parameter is not passed on to it. we certainly
could set it up so that whenever we click one of these links
javascript remembers what the current size is
and appends in that particular link or that particular u r l parameter so that
when we go to another page that page would then receive the same information and
show the same font size that was selected previously.
but you can imagine on a real website where we have quite a few different
links that lead to other parts of the site that would become pretty
complicated having to go through and have javascript remember and append in
that u r l parameter so that that size would be retained.
what will be relatively simpler
would be instead of having uh... the size remembered as url parameters
instead if we actually take whatever size is selected and store it in a cookie
we could then set up every page on the site quickly and easily.
it will just just look for that cookie and if it finds that cookie load whatever
that particular size is.
so that's more or less what we would want to do for this example
so what i'm actually going to start off with here in this example is i'm going
to go and get rid of the javascript that we had in here previously since we're
not to be working with url parameters anymore that's not really
going to benefit us that all.
and down here where i had my links that let me change my size, i'm certainly
going to need to do something different with them as well.
i think what i'm actually going to do for the size is i'm going to remove those
links altogether, just get rid of them and leave the size url, uh... i mean
the size unordered list there simply empty.
my idea going to be that if uh... whenever the page loads we'll actually
have javascript come in and produce those three links and it'll produce them
in such a way
that whenever we uh... click on one of them it will first set a cookie with
the appropriate size
and then it will go ahead and redirect this to the other page the way the
link would normally function.
now why not go ahead and hard code in the majority of the link and then simply
add the javascript after the fact? well i think this way might end up being a
little bit simpler
i also think that uh...
uh... another benefit of doing it this way is that um... if
javascript is not enabled of course the cookies aren't going to work
so if javascript isn't enabled by actually adding those links with
javascript the user will end up just seen a page basically like this. it's
still functional, still working basically degrading gracefully
uh...
but without having to have any of the extra complication of explaining to the user
why there's a link up there that uh... doesn't seem to function for them
because their javascript is disabled.
so what i'm actually going to do here for the very first part of this uh... uh...
process
is up inside my window dot onload function i'm going to retrieve that size
unordered list. so let me do var
size div uh... actually an underscore
equals uh... document dot get element by id
i'm going to treat the thing that has the id of size which is that unordered
list.
then what i want to do is i wanna go through and actually now use javascript to add
those three links and to set them up so that uh...
when we click on the link it creates the cookie and uh... puts the actual link
into the page so that the user can click on them.
so let me uh... let's see how do we want to do this.
okay so let me now uh...
i think what i'll do is an actually gonna create another function
i'm going to call it add size link
and uh...
i think i'm gonna set it up so that for the add size length i pass it the actual
size that i wanted to add
i think that what might be easiest here is uh... basically i'm gonna set it up
so that i can call add size link
uh... i keep missing those underscores today
uh... nine
right now
and add size link twelve
and add size link eighteen something along those lines of these three calls to that
function will end up creating my three links is sort of the idea.
so down here in the add size link function this is where i actually don't
want to create the link itself so i'm gonna make myself a link variable and
i'm gonna do uh... document dot create element
and i'm gonna create an a, an anchor tag
for that link then
i'm going to uh...
let's see I need to add some text for it and I need to actually set the url for it as well.
we need to pass two parameters, let's pass the size and the name
but i want it to be called which means up here it's going to be nine
small
twelve
medium
and eighteen
large something like that.
si i'm going to do link dot uh... h ref equals and i want it to link to the
current page so i'm gonna do a document
dot location dot h ref, that will get the url for the current page and i'm
going to append to that
uh... do I need to append anything to that?
actually no, now i think about it i don't need a link part itself at all
so i'm going to uh...
just simply need to add on a click event for it so lets just do uh... link dot
on click
equals and put a new function in here
something like this
a space in there I don't want.
so this is where i would actually then uh...
create the cookie and at the end of it i'm going to return false so that it doesn't
actually try to go anywhere. so here i simply wanted to create the cookie. oh and
i also still need to have the text to it as well almost forgot that so i let me do
var text equals
uh... document dot create text node
and uh... the text node will be the name
for that particular link
and then i'm going to do link dot
append child
text
there we go
and uh... as a matter of fact maybe what i'll do right here is put an alert in
uh...
clicked i'll have it say
for the on click for the link and let's just see what that gives us at that point.
oh i've just realized i created the link but i never actually added it to the
uh... to the div.
let's have it uh... return the new link
right there
and then i can come back and i can modify this and i'll do
size div
dot append child
whoo boy typing is not good today
something like that
so the link that's created in the add size link function gets returned and that then
gets passed to append child and i misspelled append there didn't i?
there we go.
so let me update my other two so that they do the same thing
there, let's give it a try and see how that works. so there's my three links
they don't have an h ref attribute right now so they're not actually showing up
as links, just as regular text so back down here in my uh... add size link
function again let me do uh... link dot h ref
equals and let's just set it to uh... pound
since the onclick event returns false anyway it's not actually gonna go
anywhere but that ought to at least get it to show up as a link
so this is the way it looks right now. not especially attractive, my links are
showing up is links at this point but they are all jammed together.
part of the reason for that i just realized is that right now uh...
what we're doing is we're putting text directly inside the ul which is of course a no-no
that's invalid
we actually need to have each one of these links that are being created put
inside an li and then the lis are what should actually then be added to the
size div. so down here in my add size link function let me create a new
variable li and do a document dot create...
create element
li so i'll make an li for each one of them and then that li and i will
append
as a child
uh... the actual link itself
and then instead of returning the link let me return the li instead. let's see
how that works out
hm didn't work out all. all right let's see if I have
any errors, uh... sure do,
i misspelled appends child it looks like
uh... a p p e n d
and see if that is any better.
there we go so now we have our link showing up again very much like we had
previously but now javascript is what is actually putting them there instead of
having them hard coded in the html.
so if javascript and cookies are turned off those won't even appear so users
won't even know it's an option but as long as they have javascript on
uh... those links will be there and then hopefully cookies will also be enabled
and they'll be able to use these links. so for those links then whenever they are
clicked right now i have them set up so that they just will pop up an alert
that says clicked. there we go. and they don't actually try to take us anywhere.
so i'll actually have it do at that point is i want it to actually create the
cookie.
so let me get rid of alert
and instead in here let's do
uh... document dot cookie equals
and let's go ahead and make this a transient cookie i don't see any particular reason
that it really needs to be permanent. uh...let's call the cookie uh... font-size
it helps to make it all lower case font-size
and then let me append to it the actual size itself the size that was
passed in this function
so that should result in a cookie being created.
so let's go back to the browser and give it a try I click the small link
if i now go take a look at my cookies
sure enough there's my font-size cookie and there's the size of it
let me go try clicking on another one let me click large.
take a look at my cookies again
the cookie that i had there previously called font-size that had the size of
twelve or eight or nine or whatever it was has now been replaced with the one
that has eighteen so it looks like the cookie is being created every time we
click one of those links just like we want.
the next thing we want to do then is we need to add a couple of new pieces of
code to this example uh... one of them
we need to be something that can actually
uh... accept the size and based on that size change the font size of everything
that's on the page so that'll be sort of like what we had before with the url
parameters or at least a small part of what we had before.
the other thing we're gonna need as we're gonna need some code to add to each one
of these pages that looks for that cookie when the page first loads and if
it finds it
then goes ahead and calls the first function i mentioned that actually
changes the size.
so let's do this first let's create a new function
let's call it uh... change size
uh...
maybe change font size just to be specific
in case we find we need to change the size of something else later and let's uh...
pass it the size. what we want to do is let's retrieve the page element
uh... only called page
and then for page let's manipulate it's c_s_s_ by doing page dot style dot
font size
and set it to whatever size was passed to this page with pixels appended to the end of
it.
so we can go ahead and test this out right now. whenever we create the cookie uh...
not only do we want to create the cookie but we also want to go ahead and change
the size right there so the user gets immediate feedback,
can immediately see the new size that they've selected.
so i'm gonna, after i create the cookie call my change font size function and
pass it the size.
and let's see what happens
small, medium
and large. so it looks like that works really well.
so then the little part that's left here is we need to uh... look for our
font-size cookie
whenever the page loads and if it finds it go ahead and take the size that's
available in that cookie and pass it this function so everything happens
uh... it'll happen immediately whenever the user goes to a new page
so let's uh...
add some new uh... code in here
actually i'm thinking maybe i'll add this could up at the top... this is code
that uh...
that i can actually have happened before the page itself even loads well no now i
think about and i take that back we can look for the cookie before the page is
even done downloading but we can't actually change the size
so this would probably again be something that would be best to do
uh... here inside our window dot onload function
so um... let's make a new function that we're going to call will call it from
right here. what should we call this particular function? what should we name it?
uh... um.... let's say uh...
set size
from cookie.
so then i need to actually create that function
misspelling function is not going to get me anywhere fast set size from cookie there
we go. so here what i want to do is I wanna retrieve the cookie string uh...
i'll call it cookies equals document dot cookie
uh... i could just use document dot cookie here but i'm gonna pull it out
and put that value into a variable here called cookies just to make it a little
bit easier to work with
and what document are what uh... cookies what my cookies variables will end up
with in there is something like uh... font-size equals twelve could
potentially have other cookies in their light color equals red
so what i want to do is i want to make sure that there's something in there i
wanna retrieve just the font-size cookie
away from all other cookies that may also be there
and then finally extract the actual size and set that particular size
so let me go ahead and start by uh... taking and separating all cookies from one
another
actually now that i think about it let's start simply by making sure there is
something
let's say if cookies
dot length
is uh... greater than zero then we're going to go ahead and do the rest of this
stuff.
uh... what i'm gonna actually wanna do here first then is i'm going to uh...
maybe recreate my cookies variable by doing a cookies dot split
and i'm gonna tell it to split the cookies on a semi colon space so if there are
multiple cookies like i wrote here in this comment the semi-colon and the space can
become the separator each one of these is gonna get split into a new element
so i'll have sort of the zero th element and the number one element here, right?
once they're actually split i could then go into a for loop. I'll say for
variable x equal to zero while x is less than
the length of that cookie's array
increment x
and each time through the loop what i want to do is take each one of these
individual cookies and split it up
so i can look at its name and potentially use its value
so i will say var uh...
uh... cookie parts
i'll name this variable
equals uh...
cookies element x
dot split and this time i'm gonna split it on an equal sign
so essentially at this point i'll find the equal sign right here
i'll use that as the point to split it and i'll end up with
font-size in one element and twelve in another something kinda like that
there we go.
um... so then i can say if
uh... cookie parts
element zero which should be the cookie's name if it's equal to font size
uh... font size, which means we found the font size cookie
then what i want to do is i want to call my change font size function right down
here
and pass it
cookie parts
element 1 which should be the actual size itself
hopefully that would about do the trick. so we come back over
reload my page
small
medium
large that all works
okay so the last link i clicked was large which means there should currently
be a cookie called font-size that has the large size stored in that so if i go
to one of my other pages...oh... it's not going to work because i haven't actually
copied any of this code over to those other pages yet so let me do that real quick.
i think what i'll actually do here is i think i'm actually gonna take most of this code
uh...
how much of it do I wanna take? i could certainly go take all these woah!
all of these functions
there we go... took out everything except for the window dot onload
and i'm going to put that stuff over in a new file. i'm gonna save this new file
in the same location where i have everything else saved on my desktop
i'm going to save that as um...
font-size changer
dot js this is my font-size changer code so there we go i'll save that right
there
then
in each one of my pages
oops can't do it there.... i'm going to need to import that
there we go
font size
changer dot js so that gets imported. now in each one of my individual pages then
what i'm gonna wanna do is have this basic exact same setup so i'm gonna copy
all my javascript from page one
over on page two then
i'm gonna drop it in
replacing the old u r l parameter code that i had in there
page three same thing
uh... and finally page four.
there, now let's see how everything works
oh my goodness where are we now?
that's interesting now we are on page two let me go back over to page one
so on page one everything looks just great i can do small
medium
large
if i go to page two now everything still large that's the most important thing
looks like my links up here doubled up the reason for that is that on all the
pages except one i never went back and removed
the old url parameter links so let me just yank those out of all my other
pages
there we go.
and that's what we end up with saw on the home page pick a size small
go to any other page on the site
that page looks for the cookie finds it and loads that as the default size
if i choose to a different size large now go to a different page
it remembers
so it looks like that's working just fine we've got our uh... page size our
relative text size being stored now in a cookie when it's stored in a cookie it makes
it very easy for each one of the individual pages to be able to access it
so i don't have to worry about passing complicated parameters back and forth
from one page to another
this example of course did get a little bit complicated but if you think about
it, it took us all of about two seconds to handle the actual cookie portion of
it. the complicated part was really sort of all the setup that went around
it.
so that seems to have all worked out um... very very well and i can't think
of anything else we can do to this one. so we will call it finished.