代碼庫存儲

㈠ HTML5本地資料庫存儲數據代碼相關問題

一個網站如何能在客戶的瀏覽器存儲更多的數據呢？

在Html4的時代在瀏覽器端存儲點網站個性化的數據，尤其是用戶瀏覽器的痕跡，用戶的相關數據等一般只能存儲在Cookie中，但是大多是瀏覽器對於Cookie的限制也就逼迫網站存儲數據盡量精簡，想存儲復雜的、關系型的用戶數據就根本不可能了。但是進入Html5時代，這一切都不叫事...

一、本地存儲由來的背景

眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那麼只能藉助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據，復雜的數據就更別扯了。

下面是Cookie的限制：

• 1, 大多數瀏覽器支持最大為 4096 位元組的 Cookie。

• 2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。

• 3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制，通常為 300 個。

• 4, Cookie默認情況都會隨著Http請求發送到後台伺服器，但並不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要cookie。

Html5的設計者們，一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器，而且支持復雜的本地資料庫，讓JS簡直就是逆天了。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage），另外一種是會話級別的本地存儲（sessionStorage）。

二、會話級別的本地存儲：sessionStorage

在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束後，數據會自動清除，跟未設置過期時間的Cookie類似。

sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• sessionStorage.setItem("demokey", "hek.com");


• //通過key來獲取value


• var dt = sessionStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //sessionStorage.clear();


• alert(sessionStorage.length);


• </script>





對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。




參考在線演示demo

三、永久本地存儲：localStorage

在最新的JS的API中增加了localStorage對象，以便於用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後台伺服器，而且存儲數據的大小機會不用考慮，因為在HTML5的標准中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。

localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• localStorage.setItem("demokey", "httpcom");


• //通過key來獲取value


• var dt = localStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //localStorage.clear();


• alert(localStorage.length);


• </script>



四、逆天了本地資料庫

雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供存儲簡單數據結構的數據，對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支持，允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫，而且支持標準的sql的CRUD操作，讓離線的Web應用更加方便的存儲結構化的數據。接下里介紹一下本地數據的相關API和用法。

操作本地資料庫的最基本的步驟是：

• 第一步：openDatabase方法：創建一個訪問資料庫的對象。

• 第二步：使用第一步創建的資料庫訪問對象來執行transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL.

• 第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。

接下來分別介紹一下相關的方法的參數和用法。

（1）openDatabase方法：

• //Demo：獲取或者創建一個資料庫，如果資料庫不存在那麼創建之


• var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });



openDatabase方法打開一個已經存在的資料庫，如果資料庫不存在，它還可以創建資料庫。幾個參數意義分別是：

• 1，資料庫名稱。

• 2，資料庫的版本號，目前來說傳個1.0就可以了，當然可以不填；

• 3，對資料庫的描述。

• 4，設置分配的資料庫的大小（單位是kb）。

• 5，回調函數(可省略)。

• 初次調用時創建資料庫，以後就是建立連接了。

（2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。

（3）通過executeSql方法執行查詢。

• ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)



參數說明：

• qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；

• value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用「?」代替，然後依次將這些參數組成數組放在第二個參數中

• ataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；

• 4,errorHandler：執行失敗時調用的回調函數；

㈡ android資料庫存儲，代碼創建資料庫、表，實現編輯框內輸入，點擊按鈕提交進行存入；從資料庫中提

常量類：ConstantUtil

publicclassConstantUtil{

	//資料庫名稱
	_NAME="user_manager.db";
	//資料庫版本號
	publicstaticfinalintDATABASE_VERSION=1;
	
	//表名
	publicstaticfinalStringTABLE_NAME="user_info";
	//欄位名
	publicstaticfinalStringUSER_ID="userId";
	publicstaticfinalStringUSER_NAME="username";
	publicstaticfinalStringUSER_PASSWORD="password";
	publicstaticfinalStringUSER_ADDRESS="address";

	

}

自定義SQLiteOpenHelper：MySQLiteOpenHelper

{

	//定義一個SQLiteDatabase對象，對表進行相應的操作
	;

	publicMySQLiteOpenHelper(Contextcontext){
		super(context,ConstantUtil.DATABASE_NAME,null,
				ConstantUtil.DATABASE_VERSION);
		mDatabase=getWritableDatabase();
	}

	/*
	*創建表
	*/
	@Override
	publicvoidonCreate(SQLiteDatabasedb){
		//TODOAuto-generatedmethodstub
		
		//sql語句
		Stringsql="createtable"+ConstantUtil.TABLE_NAME+"("
				+ConstantUtil.USER_ID+"integerprimarykey,"
				+ConstantUtil.USER_NAME+"textnotnull,"
				+ConstantUtil.USER_PASSWORD+"textnotnull,"
				+ConstantUtil.USER_ADDRESS+"textnotnull)";
		db.execSQL(sql);
	}

	@Override
	publicvoidonUpgrade(SQLiteDatabasedb,intoldVersion,intnewVersion){
		//TODOAuto-generatedmethodstub
		onCreate(db);
	}
	
	/**
	*添加數據
	*@paramcv
	*@return
	*/
	publicbooleaninsertData(ContentValuescv){
		returnmDatabase.insert(ConstantUtil.TABLE_NAME,null,cv)>0;
	}
	
	/**
	*查詢所有數據
	*@return
	*/
	publicList<Userinfo>queryData(){
		
		List<Userinfo>userinfos=newArrayList<Userinfo>();
		//從資料庫里查詢數據
		Cursorcursor=mDatabase.query(ConstantUtil.TABLE_NAME,null,null,null,null,null,null);
		
		if(cursor!=null){
			//取出數據
			while(cursor.moveToNext()){
				Userinfouserinfo=newUserinfo();
				userinfo.setUserId(cursor.getInt(0));
				userinfo.setUsername(cursor.getString(1));
				userinfo.setPassword(cursor.getString(2));
				userinfo.setAddress(cursor.getString(3));
				userinfos.add(userinfo);
			}
			
		}
		returnuserinfos;
		
	}

}

主Activity

{
	//控制項
	privateTextViewtxtName,txtPwd,txtAddress;
	privateEditTextedtName,edtPwd,edtAddress;
	privateListViewmListView;
	//資料庫對象
	;
	
	privateUserinfoAdapteradapter;
	/**.*/
	@Override
	publicvoidonCreate(BundlesavedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		findView();
		init();
	}

	privatevoidfindView(){
		//TODOAuto-generatedmethodstub
		
		edtName=(EditText)findViewById(R.id.id_edit1);
		edtPwd=(EditText)findViewById(R.id.id_edit2);
		edtAddress=(EditText)findViewById(R.id.id_edit3);
		mListView=(ListView)findViewById(R.id.id_listview);

	}

	privatevoidinit(){
		//TODOAuto-generatedmethodstub
		mySQLiteOpenHelper=newMySQLiteOpenHelper(MainActivity.this);
	}

	publicvoidonAction(Viewv){

		switch(v.getId()){
		caseR.id.id_btn_add:
			//添加數據
			StringuserName=edtName.getText().toString();
			StringuserPwd=edtPwd.getText().toString();
			StringuserAdress=edtAddress.getText().toString();
			//傳入參數
			ContentValuescv=newContentValues();
			//列名和值
			cv.put(ConstantUtil.USER_NAME,userName);
			cv.put(ConstantUtil.USER_PASSWORD,userPwd);
			cv.put(ConstantUtil.USER_ADDRESS,userAdress);
			//得到結果
			booleanflag=mySQLiteOpenHelper.insertData(cv);
			
			if(flag){

				Toast.makeText(MainActivity.this,"添加記錄成功",Toast.LENGTH_SHORT).show();
				
			}else{

				Toast.makeText(MainActivity.this,"添加記錄失敗",Toast.LENGTH_SHORT).show();
			}

			break;
		caseR.id.id_btn_query:
			//查詢數據
			List<Userinfo>userinfos=mySQLiteOpenHelper.queryData();
			if(adapter!=null){
				adapter=null;
			}
			adapter=newUserinfoAdapter(userinfos);
			mListView.setAdapter(adapter);
			
			break;
		default:
			break;
		}

	}
	
	//數據適配器
	{

		List<Userinfo>userinfos;
		publicUserinfoAdapter(List<Userinfo>_userinfos){
			this.userinfos=_userinfos;
		}
		
		@Override
		publicintgetCount(){
			//TODOAuto-generatedmethodstub
			returnuserinfos.size();
		}

		@Override
		publicObjectgetItem(intposition){
			//TODOAuto-generatedmethodstub
			returnuserinfos.get(position);
		}

		@Override
		publiclonggetItemId(intposition){
			//TODOAuto-generatedmethodstub
			returnposition;
		}

		@Override
		publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
			//TODOAuto-generatedmethodstub
			if(convertView==null){
				convertView=LayoutInflater.from(MainActivity.this).inflate(R.layout.listview_item,null);
				
				txtName=(TextView)convertView.findViewById(R.id.id_txt_name);
				txtPwd=(TextView)convertView.findViewById(R.id.id_txt_pwd);
				txtAddress=(TextView)convertView.findViewById(R.id.id_txt_address);
				
				txtName.setText(userinfos.get(position).getUsername());
				txtPwd.setText(userinfos.get(position).getPassword());
				txtAddress.setText(userinfos.get(position).getAddress());
			}
			
			
			returnconvertView;
		}
		
	}
}

完整源碼下載地址（附資料庫文件查詢軟體+運行效果圖）：