Html5的localStorage使用详解
这次给大家带来Html5的localStorage使用详解,Html5的localStorage使用注意事项有哪些,下面就是实战案例,一起来看一下。
localStorage是Html5新加入的特性,这个特性主要用来做浏览器本地存储
一、判断浏览器是否支持localStorage
if (!window.localStorage) { console.log("浏览器不支持localStorage") } else { console.log("浏览器支持localStorage") }
二、往localStorage中写入内容:
var DemoStorage = window.localStorage; //写入方法1: DemoStorage.name = "Tom"; //写入方法2: DemoStorage["age"] = 18; //写入方法3: DemoStorage.setItem("hobby", "sport"); console.log(DemoStorage.name,typeof DemoStorage.name); console.log(DemoStorage.age, typeof DemoStorage.age); console.log(DemoStorage.hobby, typeof DemoStorage.hobby); /*输出结果: Tom string 18 string sport string*/
以上的代码的例子中:age输入的是一个number,但是输出时是一个string,可见localStorage只能存储string类型的数据。
三、localStorage的删除:
1、删除localStorage中所有的内容:
Storage.clear() 不接受参数,只是简单地清空域名对应的整个存储对象。
var DemoStorage = window.localStorage; DemoStorage.name = "Tom"; DemoStorage.age = 18; DemoStorage.hobby = "sport"; console.log(DemoStorage); //输出:Storage {age: "18", hobby: "sport", name: "Tom", length: 3} DemoStorage.clear(); console.log(DemoStorage); //输出: Storage {length: 0}
2、删除某个健值对:
Storage.removeItem() 接受一个参数——你想要移除的数据项的键,然后会将对应的数据项从域名对应的存储对象中移除。
var DemoStorage = window.localStorage; DemoStorage.name = "Tom"; DemoStorage.age = 18; DemoStorage.hobby = "sport"; console.log(DemoStorage); //输出:Storage {age: "18", hobby: "sport", name: "Tom", length: 3} DemoStorage.removeItem("age"); console.log(DemoStorage); //输出:Storage {hobby: "sport", name: "Tom", length: 2}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci Html5的localStorage使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mengisytiharkan dokumen sebagai HTML5 untuk mengelakkan penyemak imbas daripada memasuki mod pelik; 2. Tentukan elemen akar dan tentukan bahasa untuk meningkatkan kebolehcapaian dan SEO; 3. Ia termasuk memastikan pengekodan watak yang betul, melaksanakan reka bentuk responsif, dan menetapkan tajuk halaman; 4. Letakkan semua kandungan yang boleh dilihat, secara pilihan menambah pautan CSS, Favicon dan JavaScript; Templat ini lengkap dan serasi dengan pelayar moden, dan sesuai untuk sebarang fail HTML baru.

Server-Sentevents (SSE) adalah teknologi dalam HTML5 yang melaksanakan pelayan yang mendorong data kepada pelanggan dalam masa nyata, dan sesuai untuk pasaran saham, sistem pemberitahuan dan senario lain. Ia berdasarkan protokol HTTP, dan tetap terbuka selepas mewujudkan sambungan. Pelayan boleh menghantar kemas kini pada bila -bila masa, menyokong penyambungan semula automatik dan format data standard. Bahagian depan menerima data dengan membuat objek Eventsource dan mendengar peristiwa mesej. Backend perlu menetapkan jenis MIME yang betul (teks/aliran peristiwa) dan pastikan sambungan terbuka dan berterusan aliran data output. Apabila menggunakannya, anda perlu memberi perhatian kepada isu-isu silang domain, masa tamat sambungan, keserasian penyemak imbas dan sekatan lapisan pertengahan.

Tag skema.org membantu enjin carian memahami format data berstruktur kandungan laman web melalui tag semantik (seperti skop item, jenis item, itemprop); Ia boleh digunakan untuk menentukan perbendaharaan kata tersuai, kaedah termasuk memperluaskan jenis sedia ada atau menggunakan tambahanType untuk memperkenalkan jenis baru; Dalam aplikasi sebenar, mengekalkan struktur yang jelas, menggunakan atribut rasmi terlebih dahulu, menguji kesahan kod, dan memastikan jenis tersuai boleh diakses; Langkah berjaga-jaga termasuk menerima sokongan separa, mengelakkan kesilapan ejaan, dan memilih format yang sesuai seperti JSON-LD.

WebGPU adalah API grafik pelayar moden yang menyediakan prestasi yang lebih cekap dan lebih dekat dengan perkakasan yang mendasari daripada WebGL. 1. Ia menyokong pengkomputeran selari GPU dan berbilang threading yang lebih baik; 2. Ia memberikan kelajuan lukisan yang lebih cepat dan ciri -ciri grafik yang lebih moden seperti simulasi pengesanan sinar; 3. Ia dapat memudahkan proses pembangunan melalui enjin seperti Three.js atau Babylon.js; 4. Perhatikan keserasian penyemak imbas, pengoptimuman model, perbezaan bahasa shader, dan alat debugging yang tidak matang. Bagi mereka yang sudah mempunyai pengalaman dalam pembangunan 3D atau pemula, secara beransur -ansur berpindah ke WebGPU adalah trend masa depan.

WebShareAPI dapat meningkatkan kecekapan perkongsian kandungan mudah alih melalui antara muka asli pelayar. Khususnya, ia termasuk: 1. Gunakan kaedah Navigator.Share () untuk mencetuskan tetingkap pop timbul sistem, yang perlu dilaksanakan dalam operasi pengguna; 2. Tentukan sama ada API disokong dan menyediakan penyelesaian alternatif seperti menyalin pautan, kod QR atau melompat ke platform sosial; 3. Mengoptimumkan kandungan perkongsian, seperti tajuk ringkas, penerangan semula jadi, dan URL dengan parameter penjejakan; 4. Perhatikan persekitaran HTTPS, pengguna pencetus aktif dan isu keserasian peranti.

Html5parsershandlemalformedhtmlbyfollowingadeterministicalgorithmtoensureConsistentandrobrendering.1.FormationIstraChedorunclosedtags, theParserautomaticallyclosestagsandadjustsnestingbasedoncontext, suchasclosingabeforeandreaandreaandreaandreaeAdinreaReaReaTheReaTheReaTheReaThing

Html5dataattributesarecustom, validhtmlattributesedToStoreExtrainFormationInelementsforjavasctorcs.1.theyaredefinedasdata-*atribut, likedata-user-id = "123"

Untuk memaparkan kawalan main balik video HTML5, anda mesti menambah atribut kawalan; 1. Tambah atribut kawalan ke tag untuk memaparkan main balik lalai, jeda, kelantangan, bar kemajuan, skrin penuh dan kawalan lain; 2. Jika anda perlu menyesuaikan paparan, anda boleh menetapkan video.controls secara dinamik ke Benar atau Palsu oleh JavaScript; 3. Gaya kawalan lalai berbeza -beza oleh penyemak imbas dan sistem operasi. Sekiranya anda perlu menyesuaikan antara muka sepenuhnya, anda perlu mengeluarkan kawalan dan menggunakan JavaScript untuk membina kawalan tersuai. Menambah atribut Kawalan adalah langkah asas dan perlu untuk melaksanakan kawalan main balik.
