JavaScript学习——WebStorage

最新推荐文章于 2024-03-06 14:24:01 发布

原创最新推荐文章于 2024-03-06 14:24:01 发布 · 392 阅读

CC 4.0 BY-SA版权

3 篇文章

订阅专栏

本文详细介绍了WebStorage技术，包括其与Cookie的区别、不同类型的WebStorage及其生命周期，并提供了localStorage的使用示例。

Cookie可以实现客户端存储少量数据的功能，但是每个网站只能存储4KB数据，使用Web Storage可以存储1~5MB。Cookie在每次处理网页请求的时候都会连带发送到服务器端，安全性低。但是他们都是以key-value键值对保存数据的。

对于扩展功能而言，比较稳妥的做法是加入一个判断语句，确定浏览器是否支持对应功能。

if(typeof(Storage)=="undefind")
{
    alert("您的浏览器不支持Web Storage")
}else{
     //localStorage及sessionStorage程序代码
}

localStorage的三种访问方法：

1、Storage对象的setItem和getItem方法：

window.localStorage.setItem(key, value);
eg. window.localStorage.setItem("data", "Hello");
window.localStorage.getItem(key);

2、数组索引

window.localStorage["data"] = "Hello";  //存储
var val = window.localStorage["data"];  //读取

3、属性

window.localStorage.data = "Hello";  //存储

var val = window.localStorage.userdata;    //读取

localStorage数据的删除方法

window.localStroage.removeItem("data");

delete window.localStorage.data;

delete window.localStorage["data"];

如果想要删除localStorage的全部数据，可以使用

localStorage.clear();

sessionStorage数据的处理语句和localStorage基本一样，只是将对语句中的localStorage->sessionStorage。

组件id.style.display='none'; /*隐藏登录按钮，将'none'换为' '即恢复显示*/

利用JS在动态增加网页组件内容。目前笔者接触过的有两种：innerHTML属性和insertAdjacentHTML()方法。

<div id="show"></div>

show.innerHTML="已成功登出!!";

insertAdjacentHTML()方法的语法：

element.insertAdjacentHTML(position, html);

element指原组件，position指插入html的位置