html5的本地存储及案例

在学习Head First HTML5 Programming一书中，学习到了html5的web存储，这里简单总结一下

1.html中的存储形式(主流形式，userData之类的忽略):

(1) cookie

是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务端设置。

cookie会跟随任意HTTP请求一起发送。是以键值对的方式来进行存储，主要作用是来进行http

持久化连接的

优点: 兼容性好

缺点：一是增加了网络流量；二则是它的数据容量有限，最多只能存储4kb的数据，

浏览器之间各有不同;三是不安全

(2) web存储机制

web storage,包括两种: sessionStorage和localStorage,前者严格用于一个浏览器会话中存储数据，

因为数据在浏览器关闭后会立即删除；后者则用于跨会话持久化的存储数据。

扫描二维码关注公众号，回复： 4529629 查看本文章

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据

大小: 每个域名是5M

缺点: IE不支持SessionStorage,低版本IE(IE6, IE7)不支持LocalStorage,并且不支持查询语言

(3) indexedDB

indexed Database API，简称为indexedDB，是在浏览器中保存结构化数据的一种「数据库」。

它类似SQL数据库的结构化数据存储机制，代替了废弃已久的web SQL Database API，它能

够在客户端存储大量的结构化数据，并且使用索引高效检索的API。

缺点：兼容性不好，未得到大部分浏览器的支持。

2.Web Storage API(sessionStorage/LocalStorage)

大家可以参考官网的开发文档，地址如下:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

存储的内容: 只要是能序列化成字符串的内容都可以存储(数组、图片、json、样式、脚本)

简介如下:

The Web Storage API provides mechanisms by which browsers can securely store key/value pairs, in a much more intuitive fashion than using cookies.

This article provides a walkthrough of how to make use of this simple technology.

Web存储API提供了一种机制，通过这种机制。浏览器可以以一种比使用cookie更直观的方式安全地存储
键值对。
本文介绍了如何使用这种简单的技术

保存数据: localStorage.setItem(key, value);

读取数据: localStorage.getItem(key);

删除单个数据: localStorage.removeItem(key);

删除所有数据： localStorage.clear();

得到某个索引的key: localStorage.key(index);

以上的key和value都必须为字符串，换言之，web Storage的API只能操作字符串

下面直接看例子:

我们在无序列表中添加内容，然后保存起来以便下次访问的时候自动加载列表项

playlist.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webville Tunes</title>
    <script src="playlist_store.js"></script>
    <script src="playlist.js"></script>
    <link rel="stylesheet" href="playlist.css">
</head>
<body>
    <form>
        <!-- type为button时，value规定按钮上的文本
        placeholder属性规定帮助用户填写输入字段的提示(hint)-->
        <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>

playlist.css

/* playlist.css */

body {
	font-family: arial, sans-serif;
}

ul#playlist {
	border: 1px solid #a9a9a9;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 10px;
	padding: 0px;
	/*list-stype-type属性设置列表项标记的类型*/
	list-style-type: none;
}

ul#playlist li {
	border-bottom: 1px solid #a9a9a9;
	padding: 10px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
    background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
    background-image: linear-gradient(#f9f9f9, #e3e3e3);
}

ul#playlist li:last-child {
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom: none;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
ul#playlist li:first-child {
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

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 {
//         alert("Adding " + songName);
//     }
// } 

function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    var li = document.createElement("li"); //创建元素 
    li.innerHTML = songName;
    var ul = document.getElementById("playlist"); //获取父亲元素
    ul.appendChild(li); //加入子节点元素
    
    save(songName);
}

playlist_store.js 这个js代码是用来实现本地存储的LocalStorage

/*
HTML5 web存储: 提供了两种在客户端存储数据的新方法(之前是用cookie来存储)
1.window.localStorage -- 存储没有截止日期的数据
2.window.sessionStorage -- 针对一个session来存储数据
*/

function save(item){
    //这里用JSOn来序列化对象、数组、数值、字符串、布尔值和null
    var playlistArray = getStoreArray("playlist");
    playlistArray.push(item);
    localStorage.setItem("playlist", JSON.stringify(playlistArray));
}

function loadPlaylist(){
    var playlistArray = getSavedSongs();
    var ul = document.getElementById("playlist");
    for(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;
}

html5的本地存储及案例

1.html中的存储形式(主流形式，userData之类的忽略):

2.Web Storage API(sessionStorage/LocalStorage)

猜你喜欢