html5中本地存储及缓存

最新推荐文章于 2024-07-25 02:11:29 发布

herion_liu

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量8.6k

点赞数 2

分类专栏： html5 文章标签： html5 存储 html web app

本文链接：https://blog.csdn.net/herion_liu/article/details/51604493

版权

本地存储： ————————————————————————— ————————————————————————— Web Storage–经测试在webapp中可以使用，不受限制 ———————————————————————– Web Storage存储机制是对HTML4中的cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5中不再使用它，转而使用改良后的Web Storage存储机制本地数据库： HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库-原本必须要保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度使用cookie存储永久数据存在问题： ▉大小：cookies的大小被限制在4KB ▉带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。 ▉复杂性：要正确地操纵cookies是很困难的。 Web Storage: ▉sessionStorage: 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据 ep:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>本地存储</title>
</head>
<body>
<h1>Web Storage本地存储示例</h1>
<input type="text" name="" id="input"><br><br>
<button onclick="saveStorage('input');">保存数据</button>
<button onclick="loadStorage('msg')">读取数据</button>
<p id="msg"></p>

<input type="text" name="" id="input1"><br><br>
<button onclick="savelocalStorage('input1');">保存数据</button>
<button onclick="loadlocalStorage('msg1')">读取数据</button>
<p id="msg1"></p>
</body>
<script>
// sessionStorage存储数据示例
function saveStorage(id){
    
var target = document.getElementById(id);
var str = target.value;
sessionStorage.setItem("message",str);
               }

function loadStorage(id){
    
var target = document.getElementById(id);
var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
               }
//localStorage存储数据示例
function savelocalStorage( id ){
    
var target = document.getElementById(id);
var str = target.value;
localStorage.setItem("message1",str);
               }
function loadlocalStorage( id ){
    
var target = document.getElementById(id);
var msg = localStorage.getItem('message1');
target.innerHTML = msg;
               }
</script>
</html>

▉localStorage: 将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用读写数据时使用的基本方法。 ▉ sessionStorage 保存数据：sessionStorage.setltem (key，value) | 读取数据：变量=sessionStorage.getItem(key) • ▉ localStorage 保存数据：localStorage.setltem (key，value), 读取数据：变量=localStorage.getltem(key)! 存储和读取大量数据： ▉ saveStorage 函数这个函数比较简单，使用“new Date().getTime()”语句得到了当前的日期和时间戳，然后调用localStorage.setltem方法，将得到的时间戳作为键值，并将文本框中的数据作为键名进行保存。保存完毕后，重新调用脚本中的loadStorage函数在页面上重新显示保存后的数据。 ▉ loadStorage 函数取得保存后的所有数据，然后以表格的形式进行显示。取得全部数据的时候，需要用到 localStorage两个比较重要的属性。 loadStorage .length 所有保存在localStorage中的数据的条数。 localStorage.key (index) 将想要得到数据的索引号作为index参数传入，可以得到 localStorage中与这个索引号对应的数据。譬如想得到第6条数据，传入的index为5 (index是从0开始计算的）。先用loadStorage.length属性获取保存数据的条数，然后做一个循环，在循环内用一个变量，从0开始将该变量作为index参数传入localStorage.key (index)属性，每次循环时该变量加1——通过这种方法，取得保存在localStorage中的所有数据。 ▉ clearStorage 函数将localStorage中保存的数据全部清除。在这个函数中只有一句语句“localStorage.clear()”，调用localStorage的clear方法时，所有保存在localStorage中的数据会全部被清除 ep:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebStorage存储大量数据</title>
</head>
<body>
<h1>WebStorage存储大量数据</h1>
<p><input type="text" id="input" /></p>
<p>
<button onclick="saveStorage('input');">保存数据</button>
<button onclick="loadStorage('msg');">获取数据</button>
<button onclick="clearStorage('msg');">清除数据</button>
</p>
<p id="msg"></p>
</body>
<script>

最低0.47元/天解锁文章

herion_liu

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
html5中本地存储及缓存

本地存储：——————————————————————————————————————————————————Web Storage–经测试在webapp中可以使用，不受限制 ———————————————————————– Web Storage存储机制是对HTML4中的cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5中不再使用它，转而使用改良
复制链接

扫一扫

专栏目录