您现在的位置是：网站首页> 前端技术> HTML HTML

HTML 本地存储简单使用示例

Smile 2020-05-07 22:57:38 HTML Javascript 阅读：1961

简介通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

1、HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage：存储没有截止日期的数据，也就是永久数据
window.sessionStorage：针对一个 session 来存储数据，也就是临时数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 对浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 编写 localStorage/sessionStorage 逻辑代码
} else {
    //alert('抱歉！不支持 Local Storage');
}

2、localStorage 对象

存储

localStorage.setItem("nickname", "传奇张三");//第一种
localStorage.nickname= "传奇张三";//第二种

取值

var nickname = localStorage.getItem("nickname ");//第一种
var nickname = localStorage.lastname;//第二种

删除

localStorage.removeItem("nickname");

3、sessionStorage 对象

sessionStorage 对象的用法和 localStorage 对象一样，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

//存储
sessionStorage.setItem("nickname", "传奇张三");//第一种
sessionStorage.nickname= "传奇张三";//第二种

//取值
var nickname = sessionStorage.getItem("nickname ");//第一种
var nickname = sessionStorage.lastname;//第二种

//删除
sessionStorage.removeItem("nickname");

备注：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式

很赞哦！ (0)

下一篇：HTML 常见表单元素与属性的使用