HTML5的WebStorage

最新推荐文章于 2022-04-03 08:00:00 发布

蛞蝓不孤寡

最新推荐文章于 2022-04-03 08:00:00 发布

阅读量410

点赞数

分类专栏：网络知识文章标签： sessionstorge localstorage

本文链接：https://blog.csdn.net/fish_skyyyy/article/details/116658473

版权

网络知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

WebStorage是什么？

WebStorage是HTML5中本地存储的解决方案之一。
WebStorage两个主要目标：
（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存在的数据的机制。

在WebStorage概念引入之前，浏览器兼容的本地存储方案只有使用cookie。

由于cookie的局限性：浪费带宽、存储大小有限、操作复杂等，转而使用WebStorage存储机制。

cookie的缺陷

数据大小：cookie的数据大小限制在4kb左右
安全问题：HTTP请求中的cookie是明文传递的，容易造成安全问题
网络负担：cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，会增加一些不必要的流量损失。

localStorage和sessionStorage :

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）。

localStorage：将数据保存在客户端本地的硬件设备，即使浏览器被关闭了该数据依然存在，下次打开浏览器访问网站时可以继续使用。除非主动删除数据，否则数据是永远不会过期的。

1.localStorage.getItem(key):获取指定key本地存储的值
2.localStorage.setItem(key,value)：将value存储到key字段
3.localStorage.removeItem(key):删除指定key本地存储的值
4.localstroage.clear();删除所有值

获取方式：localStorage：window.localStorage;
应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：将数据保存在Session对象中。

获取方式：sessionStorage：window.sessionStorage;
应用场景：sessionStorage：敏感账号一次性登录；

相同点：
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象，保存在客户端，只能存储字符串类型的对象。不同浏览器无法共享localStorage或sessionStorage中的信息。
区别：
sessionStorage为临时保存，localStorage为永久保存。

使用实例

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Web Storage 示例</title>
    </head>
    <body>
    <h1>Web Storage 示例</h1>
    <p id="msg"></p>
    <input type="text" id="input" />
    <input type="button" value="保存数据" οnclick="saveStorage('input');" />
    <input type="button" value="读取数据" οnclick="loadStorage('msg');" />
    </body>
</html>

单击"保存数据"按钮时调用saveStorage方法保存数据，单击"读取数据"按钮时调用loadStorage方法调用数据：

//sessionStorage 示例  (保存一个会话周期:从打开浏览器——到关闭浏览器窗口)
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("message",str);
    //或者sessionStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    //或者var msg=sessionStorage.message;
    target.innerHTML=msg;
}
//localStorage 示例(可永久保存)    
function saveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    localStorage.setItem("message",str);
    //或者localStorage.message=str;
}
function loadStorage(id){
    var target=document.getElementById("msg");
    var msg=localStorage.getItem("message");
    //或者var msg=localStorage.message;
    target.innerHTML=msg;
}

这个脚本文件分别使用了sessionStorage与localStorage两种方法。
这两种方法都是当用户在input文本框中输入内容后单击"保存数据"按钮保存数据，单击"读取数据"按钮读取保存后的数据。
但是两种方法对数据的处理方式不一样，在使用sessionStorage方法时，如果关闭了浏览器，这个数据就丢失了，下一次打开浏览器单击"读取数据"按钮时，读取不到任何数据。在使用localStorage方法时，即使浏览器关闭了，下次打开浏览器时仍然能够读取保存的数据。不过，数据保存是按不同的浏览器分别进行保存的，也就是说，打开别的浏览器是读取不到在这个浏览器中保存的数据的。

(1)sessionStorage

保存数据的方法：

sessionStorage.setItem(“key”,“value”);
//或者写成
sessionStorage.key=“value”;

读取数据的方法：

变量=sessionStorage.getItem(“key”);
//或者写成
变量=sessionStorage.key;

(2)localStorage

保存数据的方法：

localStorage.setItem(“key”,“value”);
//或者写成
localStorage.key=“value”;

读取数据的方法：

变量=localStorage.getItem(“key”);
//或者写成
变量=localStorage.key;

在保存数据时，若使用sessionStorage读取或保存数据，则使用sessionStorage对象并调用该对象的读写方法；
若使用localStorage读取或保存数据，则使用localStorage对象并调用该对象的读写方法。

在进行读写时，不管是哪个对象，都可以通过该对象的getItem方法来读取数据，也可以该对象的自定义属性值读取数据；可以通过该对象的setItem方法保存数据，也可以通过该对象的自定义属性值保存数据。保存数据时按“键名/键值”的形式进行保存。当通过该对象的getItem方法读取数据时，将参数指定为键名，该方法返回键值；当通过该对象的自定义属性值读取数据时，可以将该对象的某个自定义属性名作为键名，访问该自定义属性的属性值即可得到键值；当通过该对象的setItem方法保存数据时，将第一个参数指定为键名，将第二个参数指定为键值；当通过该对象的自定义属性值保存数据时，可以将该对象的某个自定义属性名作为键名，然后直接将该自定义属性值设置为键值。

在保存数据时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名(只能重新取键名，然后再保存键值)。

蛞蝓不孤寡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的WebStorage

WebStorage是什么？WebStorage是HTML5中本地存储的解决方案之一。WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。在WebStorage概念引入之前，浏览器兼容的本地存储方案只有使用cookie。由于cookie的局限性：浪费带宽、存储大小有限、操作复杂等，转而使用WebStorage存储机制。cookie的缺陷数据大小：cookie的数据大小限制在4kb左右安全问题：HTTP请求
复制链接

扫一扫