Rumah hujung hadapan web tutorial js Html5的localStorage使用详解

Html5的localStorage使用详解

Mar 16, 2018 pm 05:02 PM
h5 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中文网其它相关文章!

推荐阅读:

逐个隐藏元素的JavaScript代码

javscript的回调函数(callback)详解

Atas ialah kandungan terperinci Html5的localStorage使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

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

Artikel Panas

Rimworld Odyssey Cara Ikan
1 bulan yang lalu By Jack chen
Bolehkah saya mempunyai dua akaun Alipay?
1 bulan yang lalu By 下次还敢
Panduan pemula ' s ke Rimworld: Odyssey
1 bulan yang lalu By Jack chen
Skop pembolehubah PHP dijelaskan
3 minggu yang lalu By 百草

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1508
276
Bagaimana cara menulis templat halaman html5 asas? Bagaimana cara menulis templat halaman html5 asas? Jul 26, 2025 am 07:23 AM

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.

Memahami Acara Server-Sent di HTML5 Memahami Acara Server-Sent di HTML5 Jul 23, 2025 am 01:21 AM

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.

Mendefinisikan perbendaharaan kata adat menggunakan markup schema.org html5. Mendefinisikan perbendaharaan kata adat menggunakan markup schema.org html5. Jul 31, 2025 am 10:50 AM

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.

H5 WebGPU untuk Rendering Model 3D H5 WebGPU untuk Rendering Model 3D Jul 21, 2025 am 03:52 AM

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.

Melaksanakan API Saham Web H5 untuk Pengedaran Kandungan Melaksanakan API Saham Web H5 untuk Pengedaran Kandungan Jul 23, 2025 am 03:50 AM

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.

Bagaimanakah ralat mengendalikan parser HTML5? Bagaimanakah ralat mengendalikan parser HTML5? Aug 02, 2025 am 07:51 AM

Html5parsershandlemalformedhtmlbyfollowingadeterministicalgorithmtoensureConsistentandrobrendering.1.FormationIstraChedorunclosedtags, theParserautomaticallyclosestagsandadjustsnestingbasedoncontext, suchasclosingabeforeandreaandreaandreaandreaeAdinreaReaReaTheReaTheReaTheReaThing

Apakah atribut data HTML5? Apakah atribut data HTML5? Aug 06, 2025 pm 05:39 PM

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

Bagaimana untuk menunjukkan kawalan untuk video html5? Bagaimana untuk menunjukkan kawalan untuk video html5? Jul 26, 2025 am 08:11 AM

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.

See all articles