- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 305字
- 2021-04-02 19:07:10
Creating a welcome message based on a JavaScript cookie
Display an Alert "Hello, [Name]" to our visitor, with a cookie that was set some time earlier.
How to do it...
The MooTools Cookie class makes it surprisingly easy to create, read, access, and purge cookies. The method Cookie.write()
takes a key, a value, and optionally an object of options; for instance, the option duration
takes an integer that represents the number of days a cookie should be kept by a visitor. Cookie.read(),
terribly simple in syntax, takes the key of the cookie value that we wish to read. If empty the value is, it returns false. And, of course, we could not properly purge any cookie without the handy Cookie.dispose()
whose first parameter is identical to read()
and second parameter will merge the passed object of options with the existing cookie object options.
<script type="text/javascript" src="mootools-1.3.0.js"></script> </head> <body> <form action="" method="get"> <span id="set_cookie"> Please enter your username: <input id="my_cookie_value" type="text"/> <input id="my_cookie_write" type="button" value="Write Cookie"/> </span> <input id="my_cookie_read" type="button" value="Read Cookie"/> </form> <script type="text/javascript"> // my_cookie_val will have the value of the key var my_cookie_val = Cookie.read('users_name'); if (!my_cookie_val) $('my_cookie_read').setStyle('visibility','hidden'); else $('my_cookie_value').set('value', my_cookie_val); $('my_cookie_write').addEvent('click', function() { // set a length of days for the cookie to be kept // by the user var days = 1; // get the username given by the user var my_cookie_val = $('my_cookie_value').get('value'); // my_cookie_obj will have the options, key, // and the value in it var my_cookie_obj = Cookie.write('users_name', my_cookie_val, {duration: days}); // my_cookie_read now has something to read $('my_cookie_read').setStyle('visibility','visible'); $('set_cookie').setStyle('visibility','hidden'); }); $('my_cookie_read').addEvent('click', function() { var my_cookie_val = Cookie.read('users_name'); alert('Hello '+my_cookie_val); }); </script>
How it works...
Our final recipe in this chapter uses Element.set(), Element.get()
, and Element.setStyle()
to read and alter properties and style properties of HTML elements on the page, real-time. Visible, as well, are two useful examples of adding event listeners with Element.addEvent()
.
Tip
Remember, you can switch paddles midstream because paddles float. Hoard your cookies! Okay, just kidding, share the cookies, we have more.
- Hi!扁平化Photoshop扁平化用戶界面設(shè)計(jì)教程
- 無師自通AutoCAD:中文版室內(nèi)設(shè)計(jì)
- Photoshop CS6標(biāo)準(zhǔn)教程(全視頻微課版)
- CMS Design Using PHP and jQuery
- AutoCAD 2022中文版完全自學(xué)一本通
- NX Open API編程技術(shù)
- Audition CC音頻處理完全自學(xué)一本通
- 3ds Max三維動(dòng)畫制作項(xiàng)目式教程
- 48小時(shí)精通CREO Parametric 3.0中文版鈑金設(shè)計(jì)技巧
- 48小時(shí)精通SketchUp 8中文版草圖大師建模設(shè)計(jì)技巧
- MATLAB R2020a入門、精通與實(shí)戰(zhàn)
- 從CAD到CAE設(shè)計(jì)方法
- 從零開始:CINEMA 4D中文版案例教程
- AutoCAD 2011繪圖基礎(chǔ)
- 3D Graphics with XNA Game Studio 4.0