Html5 表单的LocalStorage

最新推荐文章于 2022-07-13 15:52:48 发布

文恒

最新推荐文章于 2022-07-13 15:52:48 发布

阅读量990

点赞数

分类专栏： Html 5 文章标签： html5 javascript 表单数据存储

本文链接：https://blog.csdn.net/u014491743/article/details/51155810

版权

Html 5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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.js
window.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));
}

//加载本地的播放列表playlist
function 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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Html5 表单的LocalStorage

Html5表单的数据存储Html5 提供localStorage方法在客户端存储数据；优点：没有时间限制的数据（存储一年之后，数据依然可用）；实现：用JavaScript来存储和访问数据例子（来自《Head First Html5》）：
复制链接

扫一扫