ในบทความนี้ฉันจะดูคุณสมบัติใหม่ 2 รายการใน HTML5: LocalEtedEatediable และ LocalStorage หลังจากที่ฉันอ่านคำอธิบายข้อกำหนด HTML5 และ W3C ฉันแทบรอไม่ไหวที่จะเขียนตัวอย่างในโปรแกรมเดียวกันนี้เพื่อแสดงคุณสมบัติใหม่เหล่านี้
เมื่อคุณดูตัวอย่าง HTML 5 ที่ฉันเขียนไว้ก่อนหน้านี้ฉันกำลังคิดที่จะสร้างตัวอย่างที่เรียบง่าย แต่ใช้งานได้เพื่อเจาะคุณสมบัติ HTML5 ใหม่เหล่านี้ในลักษณะที่แปลกประหลาดยิ่งขึ้น เป้าหมายของฉันคือไม่เพียงแค่แสดง HTML 5 APIs เหล่านี้ แต่เพื่อใช้ตัวอย่างเพื่อบอกนักพัฒนาถึงวิธีการใช้ API เหล่านี้อย่างแท้จริงในวิธีที่ใช้งานได้จริงและเป็นนวัตกรรม
ในช่วงกลางทศวรรษที่ 9 ฉันลงทะเบียนสิทธิบัตรซอฟต์แวร์ซึ่งเป็น "เว็บโพสต์-มัน" ในการอธิบายด้วยวิธีที่ง่ายที่สุดมันสามารถสร้าง "โน้ตโพสต์สีเหลือง" ที่ติดอยู่กับหน้าเว็บของคุณเช่นเดียวกับเอฟเฟกต์ที่คุณยึดติดกับจอคอมพิวเตอร์ของคุณในชีวิตจริง ฟังก์ชั่นการแก้ไขเนื้อหาของ HTML5 และฟังก์ชั่น LocalStorage ทำให้การสร้างเว็บโพสต์-มันง่ายและรวดเร็ว!
สาธิตวิธีการใช้โปรแกรม:
คลิกที่พื้นที่ของหมายเหตุโพสต์อิทด้วยเมาส์ของคุณและพิมพ์ข้อมูล โปรแกรมนี้จะจัดเก็บข้อมูลทั้งหมดที่คุณพิมพ์ลงในที่เก็บข้อมูลท้องถิ่น (ไม่ใช่ในคุกกี้) เมื่อคุณกลับมาทบทวนหน้านี้ข้อความโพสต์-อิทของคุณจะจดจำสิ่งที่คุณเขียนครั้งสุดท้าย โปรดจำไว้ว่าไม่มีเบราว์เซอร์ใช้ HTML5 อย่างเต็มที่
วิธีสำคัญในการใช้งาน LocalStorage นั้นง่ายเช่นนี้:
| function storeUserscribble (id) { var scribble = document.getElementById (& rsquo; Scribble & rsquo;). innerhtml; localstorage.setItem (& rsquo; userscribble & rsquo;, scribble); - ฟังก์ชั่น getuserscribble () { if (localstorage.getItem (& rsquo; userscribble & rsquo;)) { var scribble = localstorage.getItem (& rsquo; ผู้ใช้ & rsquo;); - อื่น { var scribble = & lsquo; < font color = blue face = & rdquo ; Geneva , Arial & rdquo ; ฉันจำข้อมูลที่คุณป้อนได้! < / i & gt; </font> & rsquo ;; - document.getElementById (& rsquo; Scribble & rsquo;). innerhtml = scribble; - |
ฉันเลือกที่จะวางคุณสมบัติที่สามารถแก้ไขได้และกิจกรรม onkeyup บน <td>::
| < TD พื้น หลัง = & rdquo ; & rdquo ; |
รหัส HTML ที่สมบูรณ์ในตัวอย่างสามารถดาวน์โหลดได้ที่นี่
ในตัวอย่างนี้โพสต์-มันสามารถปรับขนาดได้ สร้างโพสต์-มันและวางไว้บนหน้าเว็บของคุณซึ่งเพิ่มคุณสมบัติที่น่าสนใจให้กับเว็บไซต์หรือเว็บแอปของคุณ
แหล่งที่มาภาษาอังกฤษ: HTML5 - ตัวอย่างโค้ดของ LocalEditable และ LocalStorage - สร้าง Web Sticky Note!