HTML5中localStorage,seeionStorage API使用

简介: HTML5中localStorage,seeionStorage API使用,和学习心得!

localStorage,seeionStorage API使用

  1. 不管我们使用哪种存储方式 ,第一步都应该判断浏览器是否支持。
  • localStorage是否支持浏览器的代码:
if(window.localStorage){
  alert(“浏览器支持”);
}else{
  alert(“浏览器不支持”);
}
  1. 由于localStorage,seeionStorage 方法类似,这里就指介绍localStorage;
  2. 添加方法:
  • 添加方式一:
    localStorage.name = “zjx”;
  • 添加方式二:
    localStorage[“age”]=“17”;
  • 添加方式三:
    localStorage.setItem(“sex” , ”mane”);
  1. 语气对应的获取数据的方法:
  • 获取方式一:
    var call = localStorage.name;
  • 获取方式二:
    var val2 = localstorage[“age”];
  • 获取方式三:
    var val3 = localStorage.getItem(“sex”);
  1. 如何删除数据:
    localStorage.removeItem(“name”);
  2. 清除掉所有的数据:
    localStorage.clear();
  3. 注意的地方:
  • localStorage 存储的数据只能是字符串,即使在存储的时候保存的是其他类型,获取到的还是一个字符串。
  • 如果我们要在localStorage 中存储一个json 格式的数据,不经过处理直接存储肯定是不可以的,我们可以使用 json 格式数据的转换方法 JSON.stringigy()和JSON.parse(),可以在 JSON 格式和字符串之间相互转换。
  • 实例代码:
var message = {name:”zjx”,age:18,sex:”man”};
localStorage.setItem(“message”,JSON.stringify(message));
var newmessage = JSON.parse(localStorage.getItem(“message”));
  1. !!! 不要在这些里面存储敏感信息。如:密码,信用卡等。
相关文章
|
7月前
|
存储 JavaScript 前端开发
HTML API
HTML API
55 3
|
4月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
75 1
|
4月前
|
移动开发 API 开发者
什么是HTML5 History API
【8月更文挑战第11天】什么是HTML5 History API
60 1
|
4月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
50 1
|
7月前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
75 4
|
7月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
102 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
7月前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
44 1
|
7月前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
103 0
|
15天前
|
人工智能 自然语言处理 API
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口,能够处理文本、音频和视频输入,提供自然流畅的对话体验,适用于多种应用场景。
64 3
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
|
3天前
|
JSON 安全 API
淘宝商品详情API接口(item get pro接口概述)
淘宝商品详情API接口旨在帮助开发者获取淘宝商品的详细信息,包括商品标题、描述、价格、库存、销量、评价等。这些信息对于电商企业而言具有极高的价值,可用于商品信息展示、市场分析、价格比较等多种应用场景。