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>
    
     
  • 相关阅读:
    LC.225. Implement Stack using Queues(using two queues)
    LC.232. Implement Queue using Stacks(use two stacks)
    sort numbers with two stacks(many duplicates)
    LC.154. Find Minimum in Rotated Sorted Array II
    LC.81. Search in Rotated Sorted Array II
    LC.35.Search Insert Position
    前后端分离:(一)
    Redis基本使用(一)
    GIT篇章(二)
    GIT篇章(一)
  • 原文地址:https://www.cnblogs.com/willpan/p/userdata.html
Copyright © 2011-2022 走看看