Html5的学习之旅-Html5的web Storage概述(16)
程序员文章站
2022-04-14 13:53:25
...
在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题:
大小:Cookies的大小被限制在4kb左右
带宽:Coolies是随着Http业务被一起发送的,因此会浪费一部分带宽
复杂性:要正确的操作Cookies是很苦难的
针对以上问题,html5提出了一种在本地保存数据的方法:web storage
它有两种处理方式:
session storage:将数据保存在session对象中。session是用户打开这个网站到关闭这个网站,所经历的时间,也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。
local storage:将数据保存在客户端的硬件(硬盘)中,即使用户的浏览器关闭了。下次打开时候,也会重新加载
session storage实例
index.html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5表格提交</title> <script src="appWeb.js"></script></head><body> <p id="msg"></p> <input type="text" id="input"> <input type="button" value="保存数据" onclick="saveStorage('input')"> <input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>
appWeb代码
/** * Created by joy liu on 2015/9/22. */function saveStorage(id){ var target = document.getElementById(id); var string = target.value; sessionStorage.setItem("message",string); } function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message"); target.innerHTML = msg; }
!!!!效果图
local storage的实例
index代码没变,js代码
/** * Created by joy liu on 2015/9/22. *///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value; localStorage.setItem("message",string); } function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message"); target.innerHTML = msg; }
效果图
在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题:
大小:Cookies的大小被限制在4kb左右
带宽:Coolies是随着Http业务被一起发送的,因此会浪费一部分带宽
复杂性:要正确的操作Cookies是很苦难的
针对以上问题,html5提出了一种在本地保存数据的方法:web storage
它有两种处理方式:
session storage:将数据保存在session对象中。session是用户打开这个网站到关闭这个网站,所经历的时间,也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。
local storage:将数据保存在客户端的硬件(硬盘)中,即使用户的浏览器关闭了。下次打开时候,也会重新加载
session storage实例
index.html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5表格提交</title> <script src="appWeb.js"></script></head><body> <p id="msg"></p> <input type="text" id="input"> <input type="button" value="保存数据" onclick="saveStorage('input')"> <input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>
appWeb代码
/** * Created by joy liu on 2015/9/22. */function saveStorage(id){ var target = document.getElementById(id); var string = target.value; sessionStorage.setItem("message",string); } function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message"); target.innerHTML = msg; }
!!!!效果图
local storage的实例
index代码没变,js代码
/** * Created by joy liu on 2015/9/22. *///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value; localStorage.setItem("message",string); } function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message"); target.innerHTML = msg; }
效果图
以上就是Html5的学习之旅-Html5的web Storage概述(16)的内容,更多相关内容请关注PHP中文网(www.php.cn)!
推荐阅读
-
HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
-
HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
-
16个时髦的扁平化设计的 HTML5 & CSS3 网站模板_html/css_WEB-ITnose
-
16个时髦的扁平化设计的 HTML5 & CSS3 网站模板_html/css_WEB-ITnose
-
HTML5 Web Storage的图文详解
-
HTML5 学习16.表单的应用
-
html5指南-5.使用web storage存储键值对的数据_html5教程技巧
-
html5学习之旅-html5的简易数据库开发(18)
-
Html5学习之旅-html5的留言记事本开发(17)
-
简单的HTML5 Web Storage留言册