Html5 表单的LocalStorage

来源：互联网发布：宋喆职务侵占罪知乎编辑：程序博客网时间：2024/04/29 05:03

Html5表单的数据存储

Html5 提供localStorage方法在客户端存储数据；
优点：没有时间限制的数据（存储一年之后，数据依然可用）；
实现：用JavaScript来存储和访问数据

例子（来自《Head First Html5》）：

该要：生成一个表单（form），实现添加歌曲与Web存储加载；

基本用法解析：

1.获取localStorage的长度：localStorage.length
2.添加/编辑localStorage的内容：localStorage.setItem(键,值);
3.根据对应的索引去获取对应：localStorage的key的值：localStorage.key(索引);
4.根据对应的key获取对应的：localStorage.getItem(key);
5.删除数据：localStorage.removeItem(key)；

1、建立一个播放列表的表单(index.html)

//index.html<!doctype html><html lang = "en"><head>    <title>Webville Tunes</title>    <meta charset="utf-8">    <script src="playlist_store.js"></script>    <script src="playlist.js"></script>    <link rel="stylesheet" href="playlist.css"></head><body>    <form>        <input type="text" id="songTextInput" size="40" placeholder="Song name">        <input type="button" id="addButton" value="Add Song">    </form>    <ul id="playlist">    </ul></body></html>

2、Button的事件响应(playlist.js)

//playlist.jswindow.onload = init;function init() {    var button = document.getElementById("addButton");    button.onclick = handleButtonClick;    loadPlaylist();}function handleButtonClick() {    var textInput = document.getElementById("songTextInput");    var songName = textInput.value;    if (songName == ""){        alert("Please enter a song");    }else {        var li = document.createElement("li");        li.innerHTML = songName;        var ul = document.getElementById("playlist");        ul.appendChild(li);        save(songName);    }   }

3、播放列表的存储与加载（playlist_store.js）

//playlist_store.js//保存播放列表function save(item) {    var playlistArray = getStoreArray("playlist");    playlistArray.push(item);    localStorage.setItem("playlist", JSON.stringify(playlistArray));}//加载本地的播放列表playlistfunction loadPlaylist() {    var playlistArray = getSavedSongs();    var ul = document.getElementById("playlist");    if (playlistArray != null) {        for (var i = 0; i < playlistArray.length; i++) {            var li = document.createElement("li");            li.innerHTML = playlistArray[i];            ul.appendChild(li);        }    }}//获取被保存的歌曲function getSavedSongs() {    return getStoreArray("playlist");}//创建数组function getStoreArray(key) {    var playlistArray = localStorage.getItem(key);    if (playlistArray == null || playlistArray == "") {        playlistArray = new Array();    }    else {        playlistArray = JSON.parse(playlistArray);    }    return playlistArray;}

0 0