你按F12试试，或者鼠标右键点检查

永久存储  永不失效 存的东西多。  获取就是

localStorage.getTtem（key）

也没有需要特别多其他的知识，主要就是熟练HTML，CSS，JS，建议听这个课的时候，先通过菜鸟教程或者w3school了解一下，相当于做一个预习的功课，祝题主学习顺利。

小的可以试试  比如头像。

5M正确

localStorge要大写，S大写

应该是老师为了压缩讲课时间，提高效率。

笔记里也有同学的demo啊。自己写不是更好。

以下引用sylesu笔记

本地储存过期策略demo：
<script>
function get(key,exp){
var dataStr=localStorage.getItem(key);
var dataObj=JSON.parse(dataStr);
if(new Date().getTime()-dataObj.time>exp){
console.log('已过期');
}else{
console.log( "data="+dataObj.data);
}
}

function set(key,v){
var curTime=new Date().getTime();
var timeJson={data:v, time:curTime};
//JSON.stringify(obj):对象解析出字符串
localStorage.setItem( key, JSON.stringify(timeJson) );
}
</script>

图片储存：

<script>
var src="3.jpg";
function set(key){
var img=document.createElement('img');
img.src=src;
//pic加载完，触发回调
img.addEventListener('load',function(){
var imgCanvas=document.createElement('canvas');
imgContext=imgCanvas.getContext('2d');
//确保canvas和pic尺寸一致
imgCanvas.width=this.width;
imgCanvas.height=this.height;
//渲染图片到canvas中
imgContext.drawImage(this,0,0,this.width,this.height);
//用data url 的形式取出
//toDataURL(type)- 返回画布数据，默认类型为 image/png
var imgAsDataURL=imgCanvas.toDataURL('image/png');
//保存到本地
try{
localStorage.setItem(key,imgAsDataURL);
}catch(e){
console.log('失败:'+e);
}
},false
);
}
function get(key){
var srcStr=localStorage.getItem(key);
var imgObj=document.createElement('img');
imgObj.src=srcStr;
document.body.appendChild(imgObj);
}
</script>

统一放在一个叫img的文件夹下面，便于查找和阅读。这是相对路径，建议去看看相对路径。还有你这里举得image/png，如果有的话就表示image文件甲下有个叫png的文件，这个文件可以是任意格式（一般是图片格式）。如果搞不懂，可以去看看restful风格，要求文件不要带后缀名。

我也是这个问题

var imgCanvas=document.creatElement('canvas');

写错了  

document.createElement  

对的，同样问题，起一个本地server再运行就不报错了

人家老师说了，浏览器支持更好

access [英]

有可能，我按照老师的做法，成功了。

在你运行代码的时候，需要一个web服务，看老师的浏览器地址栏（localhost:8080）,而不能直接在本地用浏览器打开页面。（如果你了解Node，那么你可以安装http-server来轻松实现。）

以下是我的代码：

var src = '5k.jpg'
			var set = function(key){
				var img = document.createElement("img");
				img.addEventListener("load",function(){
					var imgCanvas = document.createElement("canvas"),
						imgContext = imgCanvas.getContext("2d");
					imgCanvas.width = this.width;
					imgCanvas.height = this.height;
					//渲染
					imgContext.drawImage(this,0,0,this.width,this.height);
					var imgAsDataUrl = imgCanvas.toDataURL("image/png");
					//保存到本地
					try{
						localStorage.setItem(key,imgAsDataUrl);
					}catch(e){
						console.log("storage failed : " + e);
					}
				},false);
				img.src = src;
			}

			var get = function(key){
				var srcStr = localStorage.getItem(key);
				var imgObj = document.createElement("img");
				imgObj.src = srcStr;
				document.body.appendChild(imgObj);
			}

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.  这是我的报错。 这是跨域问题吗。可我是本地文件的图片啊！

应该是视频后期剪裁所致吧

/**

*将图片以canvas的形式保存在localstorage中

*@key 图片名称

*@src 图片相对地址

*/

function setImg(key, src){

var img = document.createElement('img');

//图片加载完成时触发回调函数

img.addEventListener('load', function(){

var imgCanvas = document.createElement('canvas'),

imgContext = imgCanvas.getContext('2d');

imgCanvas.width = this.width;

imgCanvas.height = this.height;

//渲染图片到canvas中

imgContext.drawImage(this, 0, 0, this.width, this.height);

//用data url的形式取出

var imgAsDataURL = imgCanvas.toDataURL('image/png');

//保存到本地存储中

try{

localStorage.setItem(key, imgAsDataURL);

}

catch(e){

console.log("storage failed:" + e);

}

}, false);

}

/**

*从本地取得图片

*/

function getImg(key){

var srcStr = localStorage.getItem(key);

var imgObj = document.createElement('img');

imgObj.src = srcStr;

document.body.appendChild(imgObj);

}

setImg('img1', 'src/img/doll.jpg');

getImg('img1');

哈哈哈哈，太挑剔了撒

到底是5K还是5M 应该是5K吧