localStorage 和 sessionStorage 介绍

本文介绍了HTML5中的Web存储技术,包括localStorage和sessionStorage的区别与使用方法。详细讲解了这两种存储方式的特点,如数据持久性和会话性,并提供了示例代码来演示如何设置和获取存储值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

h5 web存储

使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage 介绍

客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储(关闭窗口,存储的数据清空);
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了

注意事项:

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

例如浏览网页运用sessionStorage的思路:
再理一下实现思路,①页面滚动,将滚动位置存到session中 → ②再次进到页面中,到session中取出上次保存的浏览位置 → ③滚动到对应位置

两个存储的用法

存储值:
setItem存储value
  用途:将value存储到key字段
  用法:.setItem( key, value)
  代码示例:

 sessionStorage.setItem("key", "value");    localStorage.setItem("site", "js8.in");

获取值:
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

var value = sessionStorage.getItem(“key”);
var site =localStorage.getItem(“site”);

Localstotage删除值

localStorage.removeItem(“key”);//删除名称为“key”的信息。
localStorage.clear();​//清空localStorage中所有信息

枚举localStorage的方法:

for(var i=0;i<localStorage.length;i++){
     var name = localStorage.key(i)​;
     var value = localStorage.getItem(name);​
}

实例:(存储浏览网页的位置)

//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
   sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
} 
});
//onload时,取出并滚动到上次保存位置

window.onload = function()
{
  var _offset = sessionStorage.getItem("offsetTop");
  $(document).scrollTop(offsetTop);
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值