zoukankan      html  css  js  c++  java
  • javascript之数据存储

    数据存储脚本化,我们用到比较多的是cookie和userData。

    首先介绍下cookie。

    cookie是浏览器提供给客户端存储少量数据的一种持久化对象之一。

    cookie的生命周期可以长于浏览器Window对象。

    我们可以通过Document的cookie属性来操作cookie对象,但这个对象是一个“单例

    ”,即它在浏览器实例中是唯一的。

    cookie包括的属性

    1、exspire 这个属性指定cookie的生存期。expire = date; 这里的date的格式只能是GMT或UCT格式。

     可以这样写:var expireTime = new Date(); expire = expireTime.toGMTString();

    2、path属性指定与cookie关联在一起的网页。默认为创建cookie的网页,若要使某个服务器域都能使用这个cookie,可以指定path = "/";

    例外指定domain可以指定cookie在当前服务器下某个子域使用。

    3、secure属性指定网络传输cookie的方式,为bool值。当为false时,表示以不安全的HTTP协议连接传输,为ture时以HTTPS或其他安全协议进行传输。

    操作cookie

    document的cookie属性以一定的字符串格式进行设置。例 name=value;expire=date;path=path;domain=domain;secure=Boolean;

    要改变cookie的值只要使用同一个名字和新的值即可,删除cookie只要设置过期日期即可。

    操作实例

    该实例通过cookie获取输入前次输入的姓名,显示不同的欢迎语句。

    View Code
    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2<html xmlns="http://www.w3.org/1999/xhtml">
    3<head>
    4<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    5<title>无标题文档</title>
    6</head>
    7
    8<body>
    9<h1>
    10<script type="text/javascript">
    11 function getCookie(name)
    12 {
    13 var cookies = document.cookie.split(";");
    14
    15 for(var i = 0 ;i<cookies.length;i++)
    16 {
    17 var s = cookies[i].split("=");
    18 if(s[0].replace(/\s+/g,"") == name) return s[1];
    19 }
    20 }
    21
    22 function setCookie(name,value,expireTime)
    23 {
    24 var expireTime = expireTime ? "expire = " + expireTime.toGMTString() : "";
    25 document.cookie = name + "=" + value +";" + expireTime;
    26 }
    27
    28 var lastPersonName = getCookie("$name$") || "";
    29
    30 var name = prompt("请输入您的姓名:",lastPersonName);
    31
    32 var times = getCookie(name) || 0;
    33
    34 setCookie(name,times - 0 + 1);
    35
    36 setCookie("$name$",name);
    37
    38 if(times>0)
    39 {
    40 document.write("Hello "+name+",Nice to meet you again.");
    41 } else {
    42
    43 document.write("Hello "+name+".");
    44
    45 }
    46
    47
    48 </script>
    49
    50</h1>
    51
    52
    53</body>
    54</html>

     接下来介绍userData。

    userData通过将数据写入UserData存储区进行存储。该数据将一直存在,除非人为删除。

    userData的声明

     

    *************************************知识点来自月影《王者归来》***********************************

     

    第一种方法:<style>.userData{behavior:url('#defaule#userData')} </style>

    第二种方法:object.style.behavior = "url('#defaule#userData')"

     userData的属性和方法

    expires指定失效日期,同cookie一样。

    setAttribute()设置属性值。形式:setAttribute("AttributeName",value);

    save()将对象数据保存到UserData存储区中。形式:save("userDataName");

    load()从UserData中载入存储的数据。形式:load("userDataName");

    getAttribute()获取指定的属性值。形式:getAttribute("AttributeName");

    操作userData实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>.userData{behavior:url(#default#userData);}</style>
    
    <script type="text/javascript">
    	<!--
    	function fnSave()
    	{
    		var content = document.getElementById('content');
    		var expireTime = new Date()
    		expireTime.setFullYear(expireTime.getFullYear() + 1); 
    		content.expire = expireTime.toGMTString();
    		content.setAttribute("inputContent",content.value);
    		content.save("cUserData");
    	
    	}
    	
    	function fnLoadInput()
    	{
    		var content = document.getElementById('content');
    		content.load("cUserData");
    		content.value = content.getAttribute("inputContent");
    	}
    	
    	-->
    
    </script>
    
    </head>
    
    <body>
    <input class="userData"  type="text" id="content" />
    <button value="save" onclick="fnSave()">Save</button>
    <button value="load" onclick="fnLoadInput()" >Load</button>
    
    </body>
    </html>
    
     
  • 相关阅读:
    正则表达式
    模块初阶
    面向对象的一些理论表述,涉及知识的理解和内置方法
    面向对象的反射 和 特殊内置方法
    面向对象的属性,类方法.静态变量
    面向对象的 多态,
    面向对象的继承属性
    面向对象组合思想的经典题
    面向对象,类名称空间查找顺序 和组合
    jQuery对象与DOM对象之间的转换
  • 原文地址:https://www.cnblogs.com/willpan/p/userdata.html
Copyright © 2011-2022 走看看