HTML 5ストレージ-LocalStorageとセッションStroage
4171 ワード
ここ数日組織部に入ったほうがいいので、収穫も大きいです.以前のページの値の伝達の方面は自分で比較的にあいまいで、この間の項目を通じて
目の中の鍛錬、これに対して少し理解しました!
プロジェクトを行う場合、ページの値を渡すには一般的に2つの方法があります.
1、formフォームを提出し、URLで値を伝える.
例:
JSでformフォームを提出し、年を渡す
<span style="font-family:Comic Sans MS;font-size:18px;">functionCadresQualitativeTarget() {
CheckYear =document.getElementById("year").value;
$('#dg').datagrid({
url:"/CalculateScoreFrame/CadresCheckQualitativeTarget?checkyear=" +CheckYear,
columns: [[
{ field: 'QualitativeTargetName',title: ' ', width: 400 },
{ field: 'conditioninput', title:' ', width: 100 },
{ field: 'calculateinput', title:' ', width: 100 },
{ field: 'operate', title: ' ', width:100 }
]]
})
}
</span>
コントロール受信値
<span style="font-family:Comic Sans MS;font-size:18px;">public JsonResultCadresCheckQualitativeTarget()
{
//
string CheckYear1 =Request["checkyear"];
int CheckYear2 =int.Parse(CheckYear1);
//
List<CalculateScoreViewModel>QualitativeTargetVM = iSetQualitativeTarge.CheckQualitativeTarget(CheckYear2);
//
List<CalculateScoreViewModel>CadresQualitativeTargetVM = QualitativeTargetVM.Where(s => s.BasicinfoType== " ").ToList();
//
returnJson(CadresQualitativeTargetVM, JsonRequestBehavior.AllowGet);
}</span>
2、ajaxを利用して値を伝える
例:
<span style="font-family:Comic Sans MS;font-size:18px;">functionDevelopmentQuanlityTarget()
{
CheckYear =document.getElementById("DevelopYearTime").value;
$.post('/SetAllWeightTarget/CheckDevelopmentQueryTarget?checkyear=' +CheckYear, function (data) {
$("#txtDevelopmentWeight").val(data[0].AllWeight);
});
}</span>
コントロールで値を取得
<span style="font-family:Comic Sans MS;font-size:18px;">public JsonResultCheckDevelopmentQueryTarget(int CheckYear)
{
string CheckYear1 =Request["checkyear"];
int CheckYear2 =int.Parse(CheckYear1);
List<CalculateScoreViewModel>CheckDevelopmentQueryTargetVM =iSetDevelopmentQuantifyTarget.CheckDevelopmentQueryTarget(CheckYear);
returnJson(CheckDevelopmentQueryTargetVM, JsonRequestBehavior.AllowGet);
}
</span>
得点を計算する機能をするときはこれが必要で、1つのボタンをクリックするときは別のページに移動し、2つの値を渡す必要があります.いろいろな原因で、上の2つの方法は特に便利ではありませんので、他の方法があるかどうかを考えています.ほほほ、苍天は心を持っていません.私に新しい大陸を発見させて、ここでみんなに分かち合います!
まず、本システムの使い方を見てみましょう.
最初のページの割り当て:sessionStorage.a=「県市区定量」;
2ページ目の値:var objecttype=sessionStorage["a"];
説明:
html 5のWebStorageには、sessionStorageとlocalStorageの2つのストレージ方式が含まれています.sessionStorageは、同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納するために使用されます.したがって、sessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージにすぎません.一方、localStorageは、データをアクティブに削除しない限り、永続化されたローカルストレージに使用されます.データは期限切れになりません.
localStorageの簡単な使い方(sessionStorageと類似):
データを格納する方法はwindowに直接与えることです.localStorageは、windowなどのプロパティを追加します.localStorage.aまたはwindow.localStorage["a"].読み取り、書き込み、削除の操作方法は簡単で、キー値のペアで存在します.以下のようにします.
localStorage.a =3;//aを「3」に設定
localStorage["a"]= "sfsf";//aを「sfsf」に設定し、上の値を上書きします.
localStorage.setItem("b","isaac");//bを「isaac」に設定
var a1 =localStorage["a"];//aの値を取得
var a2 =localStorage.a;//aの値を取得
var b =localStorage.getItem("b");//bの値を取得
localStorage.removeItem("c");//cの値をクリア
2つの比較的良い文章のリンク:
HTML 5 LocalStorageローカルストレージとセッションストレージの使用
HTML 5の格納方法sessionStorageとlocalStorageの詳細
まとめ:困難はいつも成長と伴う!解決の困難が多ければ多いほど、成長が速くなります.