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

HTML 本地存储简单使用示例

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

简介通过本地存储(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)

文章评论

站点信息