資訊專欄INFORMATION COLUMN
摘要：用于臨時保存同一窗口或標(biāo)簽頁的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。在使用存儲前檢查瀏覽器是否支持和支持對象事件函數(shù)不支持存儲。
在實(shí)際使用過程中，經(jīng)常會遇到需要在頁面間進(jìn)行傳值的情況，最初設(shè)想一定需要后端才能進(jìn)行數(shù)據(jù)的存儲和讀取，或者在本地使用一個cookie進(jìn)行保存，直到了解到HTML5 Web存儲
使用HTML5的新特性可以在本地存儲用戶的瀏覽數(shù)據(jù)。相比之前的cookie，Web 存儲更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務(wù)器上，數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.
數(shù)據(jù)以“鍵/值”對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用
方法： localStorage 和 sessionStorage （客戶端存儲）
在使用 web 存儲前,檢查瀏覽器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined") { // 支持 localStorage sessionStorage 對象 // 事件函數(shù) } else { // 不支持 web 存儲。 }
（只要不是老掉牙的IE，基本沒問題的，現(xiàn)在的瀏覽器都支持H5的）
寫的一個小demo，用于理解：在第一個頁面中輸入，跳轉(zhuǎn)后第二個頁面上讀取數(shù)據(jù)
<form> <fieldset id="submit"> <input type="text" id="one" name="one">select> <input type="text" id="two" name="two"> <input type="button" value="submit" onclick="submit()"> fieldset> form>
function submit(){ if(document.getElementById("submit").value!=""){ var Key=document.getElementById("submit"); localStorage.name = Key.value; location.href = index.html; }else{ alert("error"); } }
//index.html中
另菜鳥教程上有一個demo，個人感覺很不錯：
<div> <label for="sitename">網(wǎng)站名(key)：label> <input type="text" id="sitename" name="sitename" class="text"/> <label for="siteurl">網(wǎng)址(value)：label> <input type="text" id="siteurl" name="siteurl"/> <input type="button" onclick="save()" value="新增記錄"/> <label for="search_site">輸入網(wǎng)站名：label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找網(wǎng)站"/> <p id="find_result"><br/>p> div>
//保存數(shù)據(jù) function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("添加成功"); } //查找數(shù)據(jù) function find(){ var search_site = document.getElementById("search_site").value; var sitename = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_site + "的網(wǎng)址是：" + sitename; }
參考鏈接：
菜鳥教程：http://www.runoob.com/html/html5-webstorage.html
w3school: http://www.w3school.com.cn/html5/html_5_webstorage.asp
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1706.html
摘要：在中由于業(yè)務(wù)的需要我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理在這里我總結(jié)了幾大經(jīng)過驗(yàn)證，穩(wěn)定好用的方式給大家導(dǎo)航傳值推薦指數(shù)適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉(zhuǎn)，在做頁面跳轉(zhuǎn)時可以攜帶參數(shù)回調(diào)方 在React Native 中由于業(yè)務(wù)的需要, 我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理, 在這里我總結(jié)了幾大經(jīng)過驗(yàn)證，穩(wěn)定好用的...
摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標(biāo)志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁面的內(nèi)容，分別放置到主頁不同的中，當(dāng)我們點(diǎn)擊主頁的不同選項卡時，切換不同的顯示。 概 述 JRedu 在上一篇博客中，我們學(xué)習(xí)了如何使用Hbuilder創(chuàng)建一個APP，同時如何使用MUI搭建屬于自己的第一款A(yù)PP，沒有學(xué)習(xí)的同學(xué)可以戳鏈接學(xué)習(xí)： http...
摘要：事實(shí)上，瀏覽器內(nèi)部的運(yùn)行機(jī)制是，先將通信內(nèi)容串行化，然后把串行化后的字符串發(fā)給子線程，后者再將它還原。當(dāng)一個的文檔列表中的任何一個對象都是處于完全活動狀態(tài)的時候，這個會被稱之為需要激活線程。 瀏覽器中的Web Worker 背景介紹 我們都知道JavaScript這個語言在執(zhí)行的時候是采用單線程進(jìn)行執(zhí)行的，也就是說在同一時間只能做一件事，這也和這門語言有很大的關(guān)系，采用同步執(zhí)行的方式進(jìn)...
摘要：參考通過本地儲存特性檢測參考利用傳參在頁面跳轉(zhuǎn)的時候通過設(shè)置添加參數(shù)，在接收參數(shù)的頁面通過獲取參數(shù)字符串。發(fā)送參數(shù)的頁面接收參數(shù)的頁面獲取中的參數(shù)獲取中的參數(shù)其他參考資料頁面?zhèn)鲄⒔K極版青峰專欄博客頻道本文地址 1 ： 通過MUI封裝的openWindow 方法: mui.openWindow({ url:new-page-url, id:new-page-id, ...
閱讀 736·2023-04-25 19:43
閱讀 3982·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
