WebStorage概述

来源：互联网发布：淘宝推广八戒晨昊网络编辑：程序博客网时间：2024/05/29 18:41

WebStorage顾名思义，其功能就是在Web上储存数据的功能，这里的存储是针对客户端本地而言的。具体分为两种：sessionStorage、loaclStorage。

sessionStorage:

将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户在浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要要求保存的任何数据。

<pre name="code" class="javascript">//JS代码function saveStorage(id){    var target = document.getElementById(id);    var string = target.value;    //保存数据的方法 key value键值对的方式    sessionStorage.setItem("message",string);}function loadStorage(id){    var target = document.getElementById(id);    //读取数据    var msg = sessionStorage.getItem("message");    target.innerHTML = msg;}

<span style="font-size:18px; font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">loaclStorage：</span>

将数据保存在客户端本地的硬件设备（设备）中，即时浏览器被关闭了，改数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。

<span style="font-size:14px;">//JS语言function saveStorage(id){    var target = document.getElementById(id);    var str = target.value;    //保存数据    localStorage.setItem("message",str);}function loadStorage(id){    var target = document.getElementById(id);    //读取数据    var msg = localStorage.getItem("message");    target.innerHTML = msg;}</span>

//HTML5代码<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="appWeb1.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>

0 0