您现在的位置是: 网站首页> 前端技术> 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)