HTML5 WEB 存储

WEB 存储系统

　　- 互联网最初的设想是作为信息展示的一种方式，信息处理是后来才逐渐出现的。

　　- 但是 WEB 的本质没有改变，数据依然是在服务器上完成的，在客户端显示。

　　- 对任何程序来讲，实现数据存储是必备的功能之一，并且在需要的视乎提供数据。

　　- Cookie 曾经是用来存储少量的信息，但是受限于性质，智能存储简短的字符串。

　　* 在 HTML5 中提供了 WEB 存储的 API ，允许在硬盘上存储数据（持久化）。

　　* API 可以分为两部分：

　　　　- 信息必须且只在会话过程中使用 - sessionStorage

　　　　- 信息长期保存且有用户决定时长 - localStorage

sessionSrorage

　　sessionStorage API 像是 cookie 的替代，会在会话期间保持数据可用。

　　cookie 使用浏览器作为引用，而 sessionStorage 使用单个窗口作为引用。

　　这就意味着，窗口关闭后，sessionStorage 就不能再是用了。

创建数据

　　sessionStorage 和 localStorage 都将数据存储为项，采用键值对的格式。

语法

　　- setItem(key,value)：用键值对创建项目，主键存在则更新值。

　　- getItem(key)：根据主键获取对应的值。

　　- sessionStorage.setItem('uname','wjw');

　　- var uname = sessionStorage.getItem('uname');

案例代码

<input type="text" id="uname" name="" value="" required>
<button type="button" onclick="saveuname()" name="button">save</button>

<script type="text/javascript">
  function saveuname() {
    var uname = document.getElementById("uname").value;
    sessionStorage.setItem("uname",uname);
  }
</script>

读取数据

　　API 提供了更多的方法和属性操纵项，使代码变得有用。

属性

　　- length：返回应用程序在储存空间中积累的项的数量。

方法

　　- key(index)：获取指定索引对应的项的主键。

案例

　　- var len = sessionStorage.length;

　　- for(var i=0;i<len;i++){

　　　　- var key = sessionStorage.key(i);

　　　　- console.log(sessionStorage.getItem(key));

　　- }

案例代码

<p>
<h2 id="msg"></h2>
</p>
<p>
  <input type="text" id="key" required>
  <input type="text" id="value" required><br>
  <button type="button" onclick="save()" name="button">save</button>
  <button type="button" onclick="read()" name="button">read</button>
</p>
<script type="text/javascript">
  function save() {
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    sessionStorage.setItem(key,value);
  }

  function read() {
    var key =document.getElementById("key").value;
    var msg= document.getElementById("msg");
    msg.innerHTML = sessionStorage.getItem(key);
  }
</script>

删除数据

API 提供了两种方式删除项。

　　- removeItem(key)：根据主键删除指定项。

　　- clear()：清空整个存储空间，删除所有项。

　　- sessionStorage.removeItem('uname');

　　- sessionStorage.clear();

　　- console.log(sessionStorage.length);

案例代码

<div>
<h2 id="msg"></h2>
</div>
<p>
  <input type="text" id="key" required>
  <input type="text" id="value" required><br>
  <button type="button" onclick="saveStorage()" name="button">save</button>
  <button type="button" onclick="readStorage()" name="button">read</button>
  <button type="button" onclick="removeStorage()" name="button">remove</button>
  <button type="button" onclick="clearStorage()" name="button">clear</button>
</p>
<script type="text/javascript">

  function saveStorage() {
    var key = document.getElementById("key").value;
    var value = document.getElementById("value").value;
    sessionStorage.setItem(key,value);
  }

  function readStorage() {
    var key =document.getElementById("key").value;
    var msg= document.getElementById("msg");
    msg.innerHTML = sessionStorage.getItem(key);
  }

  function removeStorage() {
    var key =document.getElementById("key").value;
    sessionStorage.removeItem(key);
  }

  function clearStorage() {
    sessionStorage.clear();
  }

</script>

练习

　　- 创建登录界面，使用 sessionStorage 存储用户名。

　　 - 在其他界面读取用户信息

login.html 文件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
    <title>login</title>
    <style>
        .form-container {
            border: 1px solid #999999;
            margin: 0 auto;
            width: 50%;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="form-container">
    <form action="welcome.html" onsubmit="return check()">
        <h2>用户登录</h2>
        <p>
            <label for="username">姓名</label>
            <input type="text" id="username" required>
        </p>
        <p>
            <label for="password">密码</label>
            <input type="password" id="password" required>
        </p>
        <p>
            <button type="submit">登录</button>
            <button type="reset">重置</button>
        </p>
    </form>
    <script>
        function check() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            if(!sessionStorage.getItem(username)){
                sessionStorage.setItem(username, password);
                alert("注册成功！");
                return false;
            }

            if(sessionStorage.getItem(username)===password){
                alert("登录成功！");
                sessionStorage.setItem("currentuser",username);
                return true;
            }else{
                alert("登录失败！");
                return false;
            }
        }
    </script>
</div>

</body>
</html>

welcome.html 文件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=Edge,chrome=1">
    <title>welcome</title>
</head>
<body>
    <h2 id="username"></h2>
    <script>
        var username = document.getElementById("username");
        username.innerHTML = "欢迎你，" + sessionStorage.getItem("currentuser");
    </script>
</body>
</html>

localStorage

　　在窗口会话期间临时存储数据，某些情况下可用，但是如果想摸你桌面应用，临时的数据存储系统就不够用了。

　　为了解决这个问题，API 提供了另一个系统，为每个来源保留了一个存储空间，并保存信息持久可用 - localStorage。

　　利用 localStorage，可以保存大量数据，并有用户决定信息是否保留。

　　localStorage 和 sessionStorage 拥有相同的接口，方法属性一致。

　　- localStorage 拓展了 cookie 的 4K 限制。

　　- localStorage 会可以将第一次请求的数据直接存储到本地，这相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只要在高版本浏览器中才支持的。

localStorage 的局限性

　　浏览器的大小不统一，并且在 IE8 以上版本才支持 localStorage 这个属性。

　　目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们目前比较常见的 JSON 对象类型需要一些转换。

　　localStorage 在浏览器的隐私模式下面是不可读取的。

　　localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。

　　localStorage 不能被爬虫抓取到。

localStorage 的浏览器支持判断

　　if(!window.localStorage){

　　　　console.log("浏览器不支持localStorage");

　　}else{

　　　　console.log("浏览器支持localStorage");

　　}

<script type="text/javascript">
  if(!window.localStorage){
　　　　console.log("浏览器不支持localStorage");
　　}else{
　　　　console.log("浏览器支持localStorage");
　　}
</script>

localStorage 写入

　　var storage = window.localStorage;

　　// 写入 a 字段

　　storage["a"]=1;

　　// 写入 b 字段

　　storage.b=1;

　　// 写入 c 字段

　　storage.serItem("c",3);

　　console.log(typeof storage["a"]);

　　console.log(typeof storage["b"]);

　　console.log(typeof storage["c"]);

案例代码

<script type="text/javascript">
  if(!window.localStorage){
　　　　console.log("浏览器不支持localStorage");
　　}else{
　　　　console.log("浏览器支持localStorage");
       localStorage["a"] = "apple";
       localStorage.b="banana";
       localStorage.setItem("c",3);
　　}
</script>

localStorage 存储 JSON 数据

　　var storage = window.localStorage;

　　var data = {

　　　　title : "html" ,

　　　　author : "w3c" ,

　　　　price : 10.99

　　};

　　var d = JSON.stringify(data);

　　storage.setItem("data",d);

　　console.log(storage.data);

案例代码

<script type="text/javascript">

  var storage = window.localStorage;
  var book = {
    title:"html",
    author:"w3c",
    price:10.99,
  };

  console.log(typeof book);  // 打印 book 类型
  var str = JSON.stringify(book); // 转化成字符串
  console.log(typeof str); // 打印 str 类型
  console.log(str);  // 输出字符串

  storage.setItem("book",str);

</script>

localStorage 读取 JSON 数据

　　var json = storage.getItem("data");

　　var jsonObj = JSON.parse(json);

　　console.log(typeof jsonObj);

案例代码

<script type="text/javascript">

  var storage = window.localStorage;
  var book = {
    title:"html",
    author:"w3c",
    price:10.99,
  };

  console.log(typeof book);  // 打印 book 类型
  var str = JSON.stringify(book); // 转化成字符串
  console.log(typeof str); // 打印 str 类型
  console.log(str);  // 输出字符串

  storage.setItem("book",str);

  var str1 = storage.getItem("book");
  var book1 = JSON.parse(str1);

  document.writeln("标题："+book1.title);
  document.writeln("<br/>");
  document.writeln("作者："+book1.author);
  document.writeln("<br/>");
  document.writeln("价格："+book1.price);
  document.writeln("<br/>");

</script>

posted @ 2018-04-28 13:30 我是ed 阅读(158) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

我是ed.

学习记录仅供参考不可尽信

HTML5 WEB 存储

HTML5 WEB 存储

WEB 存储系统

sessionSrorage

创建数据

读取数据

删除数据

练习

localStorage

localStorage 的局限性

localStorage 的浏览器支持判断

localStorage 写入

localStorage 存储 JSON 数据

localStorage 读取 JSON 数据

公告

我是ed.

学习记录 仅供参考 不可尽信

HTML5 WEB 存储

HTML5 WEB 存储

WEB 存储系统

sessionSrorage

创建数据

读取数据

删除数据

练习

localStorage

localStorage 的局限性

localStorage 的浏览器支持判断

localStorage 写入

localStorage 存储 JSON 数据

localStorage 读取 JSON 数据

公告

学习记录仅供参考不可尽信