localStorage示例

最新推荐文章于 2024-04-04 02:29:14 发布
最新推荐文章于 2024-04-04 02:29:14 发布
阅读量276 收藏 1
点赞数
分类专栏： web前端 html5 文章标签： localStorage toDataURL drawImage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luofeng457/article/details/100585622
版权
属性
  1. 设置Item，localStorage.setItem(key, val);
  2. 获取Item，localStorage.getItem(key);
  3. 移除Item，localStorage.removeItem(key);
  4. 移除所有item，localStorage.clear();
demo
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="controller">
  	<button onClick="setImg()">set</button>
  	<button onClick="getImg()">get</button>
  </div>
	<script type="text/javascript" width="1920" height="1080">
		let imgSrc = "https://s4.music.126.net/style/web2/img/default/default_album.jpg";

		function setImg(key) {
			var img = document.createElement('img');

			img.setAttribute('crossOrigin', 'Anonymous');

			img.addEventListener('load', function () {
				var canvas = document.createElement('canvas');
				debugger;
				var canvasCxt = canvas.getContext('2d');
				canvas.width = this.width;
				canvas.height = this.height;
				// render img to canvas
				canvasCxt.drawImage(this, 0, 0, this.width, this.height);
				var imgDataURL = canvas.toDataURL('image/jpeg');

				try {
					localStorage.setItem(key, imgDataURL);
				} catch (e) {
					console.log(e);
				}
			}, false);

			img.src = imgSrc;
		}

		function getImg(key) {
			let 
				src = localStorage.getItem(key),
				imgObj = document.createElement('img');
				imgObj.src = src;
				document.body.appendChild(imgObj);
		}
	</script>
</body>
</html>

在线demo点击此处

将图片绘制到canvas上时，如果图片地址存在跨域限制，需要为img设置crossOrigin属性：img.setAttribute('crossOrigin', Anonymous')

Neil-
关注
专栏目录
localStorageExampleForB:一个小的 localStorage 示例
06-15
在您的控制台类型中： saveToLocalStorage(); 然后 addPlayerTwo(); 然后 doSomethingWithTheData();
深入浅出 localStorage 存储：浏览器本地存储的利器
最新发布
weixin_63490470的博客
08-15 1847
localStorage 是 HTML5 中引入的一种新的本地存储机制，它允许网页在用户浏览器中存储键值对数据，并且这些数据在浏览器关闭后仍然可以保留。localStorage 存储为开发者提供了在客户端存储数据的便捷方式，可以用于缓存数据、保存用户偏好、实现离线功能等，极大地提升了 Web 应用的性能和用户体验。
localStorage例子
Kayson13的博客
03-29 229
localStorage localStorage与sessionStorage区别： localStorage的数据可以长期保留。 sessionStorage的数据，当前会话结束或者页面关闭，存储只sessionS中的数据会被清除。 局限 兼容性：IE8以上版本才有localStorage属性 localStorage的值类型限定为String型，因此JSON对象需要转换 另外有说： lo...
localStorage的使用总结及简单案例
anqieranqier的博客
08-02 1608
作用localStorage本地存储，localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小
localStorage 存储demo 例子，大厂面经合集
2401_84093860的博客
04-04 874
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
11-21
总的来说，这个示例展示了如何使用JavaScript和HTML5 Localstorage在客户端实现简单的注册登录功能，但同时也揭示了其在安全性和复杂性方面的局限性。在实际开发中，应当结合服务器端验证和更安全的数据存储策略来...
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
示例中的JavaScript代码演示了如何使用localStorage进行数据的保存、读取和提交。当用户点击“提交”按钮时，表单数据会被转换成JSON格式并存储到localStorage中，页面加载时则会读取存储的数据填充表单。 2. ...
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
12-30
如果是用vue做的单页面程序的时候，将监听的方法放在App.vue是最灵活的 <router></router> [removed] export default { data () { return { theme: this.$store.state.app.themeColor ...
localStorage 简单例子
sunnychen90的专栏
12-01 376
//用localStorage 来保存数据 localStorage.key='想要保存的值'; //将localStorage中的值取出来 var hoge = localStorage.key; //“想要保存的值”在页面上显示 document.write(hoge)
HTML5 本地储存 localStorage 案例
慢谈人生
08-18 292
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var json={ username:"tjj", password:"123456" }; function setItem(){ //单个值存储 window.localStorage.setItem("username","tjj"...
localStorage 购物车案例
Cloudyunduo的博客
01-27 309
localStorage 购物车案例 两个页面 实时渲染页面 css：bootstrap 开源： 添加商品页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>添加商品页面<
【实例】html5中使用localStorage实现简易的便利贴网页
热门推荐
Slience
08-01 1万+
要求 实现长时间（即便是关了浏览器）也能记录数据让每一条便利贴以对象的方式存储 思路 可以使用html5中的localStorage实现长时间的数据本地存储使用json中的parse和stringify实现便利条对象的数据化转换每一个便利条有数据(text)和颜色(color)两个属性可以使用(new Date()).getTime()来让每一个便利条的key唯一 实现
localStorage使用——案例：记住用户名
Marcuslu的博客
11-19 586
localStorage使用——案例：记住用户名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="username" ><input type="checkbox" id="wheRem
案例13-localStorage的使用分析
Circ
03-08 584
localStorage
基于js，localStorage的商品列表和购物车案例
ycccyc的博客
09-29 1805
案例大致可以分为两个部分：商品列表的实现和购物车的实现 商品列表 商品是通过构造json数据实现的。具体的json数据如下： 其中的图片需要大家自行更换。 [ { "id": 1, "src": "http://img12.360buyimg.com/n7/jfs/t1/4136/40/6201/250287/5ba1f333E745fc8b9/b34c5ccc4c4fd548.jp...
HTML5 localStorage使用演示代码实例---------评论
Return_KB的博客
01-10 599
分享一段代码实例，它利用localStorage实现了本地留言板功能。 代码实例如下: 0010020030040050060070080090100110120130140150160170180190200210220230240250260270280290300310320330340350360370380390400410420430440450460470480490500510
HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
zz410675629的专栏
05-23 2509
Web Storage是什么？ 　　Web Storage功能，顾名思义，就是在Web上针对客户端本地储存数据的功能，具体来说Web Storage分为两种； sessionStorage： 　　将数据保存在session对象中，所谓session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间
本地存储localStorage
zhangge3663的博客
09-01 363
我们可以通过全局属性localStorage访问本地存储功能，该属性返回一个Storage对象，Storage对象用来保存键/值形式的字符串对象 Storage对象有如下属性和方法: Storage对象可以用来保存键/值对，之中键和值都必须是字符串键必须是唯一的，这意味着如果我们用Storage对象中的setItem方法设置相同的键名的键/值对，后面一个会覆盖掉前面一个，事实上就是后面一个更新了已经存在的键的值。 localStorage案例1(localStorage.html): <
localstorage用法源码示例
05-14
其中，`localStorage.setItem(key, value)` 用于存储数据，`localStorage.getItem(key)` 用于获取数据，`localStorage.removeItem(key)` 用于删除指定的数据，`localStorage.clear()` 用于清空所有的数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neil-

你们的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值