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. !!! 不要在这些里面存储敏感信息。如:密码,信用卡等。
相关文章
|
6月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
105 1
|
6月前
|
移动开发 API 开发者
什么是HTML5 History API
【8月更文挑战第11天】什么是HTML5 History API
81 1
|
6月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
65 1
|
9月前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
107 4
|
9月前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
119 0
|
9月前
|
移动开发 前端开发 API
简述HTML5 Canvas的基本绘图API及其在游戏开发中的作用。
HTML5 Canvas 提供丰富的绘图API,用于在网页上绘制图形、动画和视觉效果,支持基本形状、文本、渐变、图像及像素操作。在游戏开发中,Canvas API用于绘制游戏元素、实现动画效果、进行物理碰撞检测,并具备跨平台兼容性,为创新游戏体验提供强有力的支持。
58 1
|
9月前
|
存储 JavaScript 前端开发
HTML API
HTML API
62 3
|
9月前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
115 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
移动开发 JavaScript 前端开发
resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传
resumable.js是一个 JavaScript 库,通过 HTML5 文件 API 提供了稳定和可恢复的批量上传功能。在上传大文件的时候将文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成。这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传。由于采用了分块技术,它也允许用户暂停和恢复上传。
1244 0
resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布

热门文章

最新文章