HTML5 Web储存

作者: 龍飝 | 来源:发表于2018-03-22 14:56 被阅读16次

HTML5 Web储存
H5本地储存那些事儿
Storage
浏览器本地储存
前端面试知识点
webSQL
Web Storsge本地存储
localStorage和sessionStorage
HTML5存储
web本地存储

HTML5 Web存储，一个比cookie更好的本地储存方式

HTML5 Web储存：
使用HTML5可以在本地储存yoghurt的浏览数据
早些时候，本地储存使用的是cookie，但是Web存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，他也可以存储大量的数据，而不影响网站的性能
数据以键/值对存在。web网页的数据只允许该网页访问使用

localStorage 和sessionStorage
客户端存储数据的两个对象
localStorage 没有时间限制的数据存储
sessionStorage 针对一个session的数据存储

在使用web存储钱，应当检查浏览器是否支持localStorage和sessionStorage

if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}

localStorage 对象
localStorage对象储存的数据没有时间限制
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.sitename="我爱H5";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

</body>
</html>
实例解析：
使用key= "sitename"和 value = "我爱H5"创建一个localStorage键值对
检索键值"sitename"的值然后将数据插入 id= "result"的元素中
以上实例也可以这样写

// 存储
localStorage.sitename = "我爱H5";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
移除localStorage中的"lastname"

localStorage.removeItem("lastname");

不管是localStorage，哈市sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）
1.保存数据：localStorage.setltem(key,value)
2.读取数据 localStorage.getItem(key);
3.删除单个数据：localStorage.removeItem(key);
4.删除所有数据：localStorage.clear();
5.得到某个索引的key：localStorage.key(index);
提示：键值对通常以字符串存储，你可以按自己的需要转换改格式
下面实例展示了用户点击按钮的次数
代码中的字符串值转换为数字类型
实例：
<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

function clickCounter()

{

if(typeof(Storage)!=="undefined")

{

    if (localStorage.clickcount)

    {

        localStorage.clickcount=Number(localStorage.clickcount)+1;

    }

    else

    {

        localStorage.clickcount=1;

    }

    document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

}

else

{

    document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";

}

}

</script>

</head>

<body>

<p>点击该按钮查看计数器的增加。</p>

<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>

</body>

</html>

sessionStorage对象
sessionStorage方法针对一个session进项数据存储，当用户关闭浏览器窗口后，数据会被删除
如何创建并访问一个sessionStorage
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>

Web Storage 开发一个简单的网站列表程序
网站列表程序实现以下功能
1.可以输入网站名，网址，以网站名作为key存入localStorage
2.根据网站名，产找网址
3。列出当前以保存的所有网站

以下代码用于保存于查找数据

save() 与 find() 方法
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}

完整实例演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>

<label for="siteurl">网址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>

<input type="button" onclick="save()" value="新增记录"/>

<label for="search_phone">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result">
</p>
</div>

<div id="list">
</div>
<script>
// 载入所有存储在localStorage的数据
loadAll();

//保存数据  
function save(){  
    var siteurl = document.getElementById("siteurl").value;  
    var sitename = document.getElementById("sitename").value;  
    localStorage.setItem(sitename, siteurl);
    alert("添加成功");
}
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var siteurl = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");  
    find_result.innerHTML = search_site + "的网址是：" + siteurl;  
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){  
    var list = document.getElementById("list");  
    if(localStorage.length>0){  
        var result = "<table border='1'>";  
        result += "<tr><td>key</td><td>value</td></tr>";  
        for(var i=0;i<localStorage.length;i++){  
            var sitename = localStorage.key(i);  
            var siteurl = localStorage.getItem(sitename);  
            result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";  
        }  
        result += "</table>";  
        list.innerHTML = result;  
    }else{  
        list.innerHTML = "数据为空……";  
    }  
}      
</script>

</body>
</html>

以上实例知识演示了简单的localStorage存储和查找，更多情况下我们储存的数据会更复杂
以下我们将使用JSON.stringif来储存对象数据，JSON.stringify可以将对象转换为字符串
var site = new Object;
...
var str = JSON.stringify(site); // 将对象转换为字符串
之后我们使用 [JSON.parse] 方法将字符串转换为 JSON 对象：

var site = JSON.parse(str);

JavaScript实现代码：

//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.keyname,str);
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}

完整实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="keyname">别名(key):</label>
<input type="text" id="keyname" name="keyname" class="text"/>

<label for="sitename">网站名：</label>
<input type="text" id="sitename" name="sitename" class="text"/>

<label for="siteurl">网址：</label>
<input type="text" id="siteurl" name="siteurl"/>

<input type="button" onclick="save()" value="新增记录"/>

<label for="search_phone">输入别名(key)：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result">
</p>
</div>

<div id="list">
</div>
<script>
//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.keyname,str);
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}

//将所有存储在localStorage中的对象提取出来，并展现到界面上
// 确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错
function loadAll(){  
    var list = document.getElementById("list");  
    if(localStorage.length>0){  
        var result = "<table border='1'>";  
        result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";  
        for(var i=0;i<localStorage.length;i++){ 
            var keyname = localStorage.key(i);  
            var str = localStorage.getItem(keyname);  
            var site = JSON.parse(str);  
            result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";  
        }  
        result += "</table>";  
        list.innerHTML = result;  
    }else{  
        list.innerHTML = "数据为空...";  
    }  
}  
</script>

</body>
</html>

HTML5 Web储存
HTML5 Web存储，一个比cookie更好的本地储存方式 HTML5 Web储存：使用HTML5可以在本地储存...
H5本地储存那些事儿
html5新增了本地储存web Storage API，相较于cookies被限制在4KB，web Storage...
Storage
Web Storage 1.1 概述 Web Storage是HTML5提供的一种新的浏览器端数据储存机制，它提供...
浏览器本地储存
web应用的本地储存常用的方法有两种，一种是利用cookie进行储存，另一种是利用HTML5储存的方式来实现。早...
前端面试知识点
HTML 对HTML5的理解，web语义化，SEO。页面加载过程。结构组织。新增API，如本地储存，Canv...
webSQL
HTML5 Web 存储 HTML5 应用程序缓存HTML5 Web SQL 数据库Web SQL 数据库 API...
Web Storsge本地存储
在HTML5中，除了CANVAS元素，另外一个新增的非常重要功能就是可以在本地客户端储存数据的Web Storag...
localStorage和sessionStorage
HTML5 Web存储包括localStorage和sessionStorage，HTML5 Web是以键值对的形...
HTML5存储
HTML5学习笔记 Web存储 HTML5 web存储，一个比cookie更好的本地存储方式。什么是html5 ...
web本地存储
HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式。什么是 HTML5 W...